<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnFilterPanelChip from 'src/components/ui/VnFilterPanelChip.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';
import FetchData from 'src/components/FetchData.vue';
import { dateRange } from 'src/filters';

defineProps({ dataKey: { type: String, required: true } });
const { t, te } = useI18n();
const warehouses = ref();
const groupedStates = ref();

const handleScopeDays = (params, days, callback) => {
    const [from, to] = dateRange(Date.vnNew());
    if (!days) {
        Object.assign(params, { from, to, scopeDays: 1 });
    } else {
        params.from = from;
        to.setDate(to.getDate() + days);
        params.to = to;
    }
    if (callback) callback();
};

const getLocale = (label) => {
    const param = label.split('.').at(-1);
    const globalLocale = `globals.params.${param}`;
    return te(globalLocale) ? t(globalLocale) : t(`params.${param}`);
};
</script>
<template>
    <FetchData url="Warehouses" auto-load @on-fetch="(data) => (warehouses = data)" />
    <FetchData
        url="AlertLevels"
        auto-load
        @on-fetch="
            (data) =>
                (groupedStates = data.map((x) => Object.assign(x, { code: t(x.code) })))
        "
    />
    <VnFilterPanel
        :data-key="dataKey"
        :search-button="true"
        :hidden-tags="['from', 'to', 'search']"
        :custom-tags="['scopeDays']"
        :unremovable-params="['from', 'to', 'scopeDays']"
        search-url="saleMonitorTickets"
    >
        <template #tags="{ tag, formatFn }">
            <div class="q-gutter-x-xs">
                <strong v-text="`${getLocale(tag.label)}:`" />
                <span v-text="formatFn(tag.value)" />
            </div>
        </template>
        <template #customTags="{ params, searchFn, formatFn }">
            <VnFilterPanelChip
                v-if="params.scopeDays"
                removable
                @remove="handleScopeDays(params, null, searchFn)"
            >
                <strong v-text="`${t(`params.scopeDays`)}:`" />
                <span v-text="formatFn(params.scopeDays)" />
            </VnFilterPanelChip>
        </template>
        <template #body="{ params }">
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="t('globals.params.clientFk')"
                        v-model="params.clientFk"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="t('params.orderFk')"
                        v-model="params.orderFk"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInputNumber
                        :label="t('params.scopeDays')"
                        v-model="params.scopeDays"
                        is-outlined
                        @update:model-value="(val) => handleScopeDays(params, val)"
                        @remove="(val) => handleScopeDays(params, val)"
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="t('params.nickname')"
                        v-model="params.nickname"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnSelect
                        outlined
                        dense
                        rounded
                        :label="t('globals.params.salesPersonFk')"
                        v-model="params.salesPersonFk"
                        url="Workers/search"
                        :params="{ departmentCodes: ['VT'] }"
                        is-outlined
                        option-value="id"
                        option-label="name"
                        :no-one="true"
                    >
                        <template #option="{ opt, itemProps }">
                            <QItem v-bind="itemProps">
                                <QItemSection>
                                    <QItemLabel>{{ opt.name }}</QItemLabel>
                                    <QItemLabel
                                        v-if="opt.code"
                                        class="text-grey text-caption"
                                    >
                                        {{ `${opt.nickname}, ${opt.code}` }}
                                    </QItemLabel>
                                </QItemSection>
                            </QItem>
                        </template>
                    </VnSelect>
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnInput
                        :label="t('params.refFk')"
                        v-model="params.refFk"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnSelect
                        outlined
                        dense
                        rounded
                        :label="t('params.agencyModeFk')"
                        v-model="params.agencyModeFk"
                        url="AgencyModes/isActive"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnSelect
                        outlined
                        dense
                        rounded
                        :label="t('globals.params.stateFk')"
                        v-model="params.stateFk"
                        url="States"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnSelect
                        outlined
                        dense
                        rounded
                        :label="t('params.groupedStates')"
                        v-model="params.alertLevel"
                        :options="groupedStates"
                        option-label="code"
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnSelect
                        outlined
                        dense
                        rounded
                        :label="t('globals.params.warehouseFk')"
                        v-model="params.warehouseFk"
                        :options="warehouses"
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <VnSelect
                        outlined
                        dense
                        rounded
                        :label="t('globals.params.provinceFk')"
                        v-model="params.provinceFk"
                        url="Provinces"
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <QCheckbox
                        :label="t('params.myTeam')"
                        v-model="params.myTeam"
                        toggle-indeterminate
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <QCheckbox
                        :label="t('params.problems')"
                        v-model="params.problems"
                        toggle-indeterminate
                    />
                </QItemSection>
            </QItem>
            <QItem>
                <QItemSection>
                    <QCheckbox
                        :label="t('params.pending')"
                        v-model="params.pending"
                        toggle-indeterminate
                    />
                </QItemSection>
            </QItem>
        </template>
    </VnFilterPanel>
</template>
<i18n>
en:
    params:
        orderFk: Order id
        scopeDays: Days onward
        nickname: Nickname
        refFk: Invoice
        agencyModeFk: Agency
        groupedStates: Grouped State
        myTeam: My team
        problems: With problems
        pending: Pending
        alertLevel: Grouped State
    FREE: Free
    DELIVERED: Delivered
    ON_PREPARATION: On preparation
    ON_PREVIOUS: On previous
    PACKED: Packed
    No one: No one
    
es:
    params:
        orderFk: Id cesta
        scopeDays: Días en adelante
        nickname: Nombre mostrado
        refFk: Factura
        agencyModeFk: Agencia
        groupedStates: Estado agrupado
        myTeam: Mi equipo
        problems: Con problemas
        pending: Pendiente
        alertLevel: Estado agrupado
    FREE: Libre
    DELIVERED: Servido
    ON_PREPARATION: En preparación
    ON_PREVIOUS: En previa
    PACKED: Encajado
</i18n>
