<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
import VnSelect from 'components/common/VnSelect.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInput from 'components/common/VnInput.vue';

const { t } = useI18n();
const props = defineProps({
    dataKey: {
        type: String,
        required: true,
    },
});

const emit = defineEmits(['search']);

const supplierList = ref([]);
const exprBuilder = (param, value) => {
    switch (param) {
        case 'tractorPlate':
        case 'trailerPlate':
        case 'driverName':
        case 'phone':
            return { [param]: { like: `%${value}%` } };
        case 'supplierFk':
        case 'price':
            return { [param]: value };
        case 'from':
            return { etd: { gte: value } };
        case 'to':
            return { etd: { lte: value } };
    }
};
</script>

<template>
    <FetchData
        url="Suppliers"
        :filter="{ fields: ['id', 'nickname'] }"
        sort-by="nickname"
        limit="30"
        @on-fetch="(data) => (supplierList = data)"
        auto-load
    />
    <VnFilterPanel
        :data-key="props.dataKey"
        :search-button="true"
        :expr-builder="exprBuilder"
        @search="emit('search')"
    >
        <template #tags="{ tag, formatFn }">
            <div class="q-gutter-x-xs">
                <strong>{{ t(`params.${tag.label}`) }}: </strong>
                <span>{{ formatFn(tag.value) }}</span>
            </div>
        </template>
        <template #body="{ params }">
            <QItem class="q-my-sm">
                <QItemSection>
                    <VnInputDate v-model="params.from" :label="t('From')" is-outlined />
                </QItemSection>
            </QItem>
            <QItem class="q-my-sm">
                <QItemSection>
                    <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
                </QItemSection>
            </QItem>
            <QItem class="q-my-sm">
                <QItemSection>
                    <VnInput
                        v-model="params.tractorPlate"
                        :label="t('Tractor Plate')"
                        is-outlined
                        clearable
                    />
                </QItemSection>
            </QItem>
            <QItem class="q-my-sm">
                <QItemSection>
                    <VnInput
                        v-model="params.trailerPlate"
                        :label="t('Trailer Plate')"
                        is-outlined
                        clearable
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="supplierList" class="q-my-sm">
                <QItemSection>
                    <VnSelect
                        :label="t('Carrier')"
                        v-model="params.supplierFk"
                        :options="supplierList"
                        option-value="id"
                        option-label="nickname"
                        dense
                        outlined
                        rounded
                        emit-value
                        map-options
                        use-input
                        :input-debounce="0"
                    >
                        <template #option="{ itemProps, opt }">
                            <QItem v-bind="itemProps">
                                <QItemSection>
                                    <QItemLabel
                                        >{{ opt.id }} - {{ opt.nickname }}</QItemLabel
                                    >
                                </QItemSection>
                            </QItem>
                        </template>
                    </VnSelect>
                </QItemSection>
            </QItem>
            <QItem class="q-my-sm">
                <QItemSection>
                    <VnInput
                        v-model="params.price"
                        :label="t('Price')"
                        type="number"
                        is-outlined
                        clearable
                    />
                </QItemSection>
            </QItem>
            <QItem class="q-my-sm">
                <QItemSection>
                    <VnInput
                        v-model="params.driverName"
                        :label="t('Driver name')"
                        is-outlined
                        clearable
                    />
                </QItemSection>
            </QItem>
            <QItem class="q-my-sm">
                <QItemSection>
                    <VnInput
                        v-model="params.phone"
                        :label="t('Phone')"
                        is-outlined
                        clearable
                    />
                </QItemSection>
            </QItem>
        </template>
    </VnFilterPanel>
</template>

<i18n>
en:
    params:
        tractorPlate: Tractor Plate
        trailerPlate: Trailer Plate
        supplierFk: Carrier
        price: Price
        driverName: Driver name
        phone: Phone
        from: From
        to: To
es:
    params:
        tractorPlate: Matrícula tractora
        trailerPlate: Matrícula remolque
        supplierFk: Transportista
        price: Precio
        driverName: Nombre del conductor
        phone: Teléfono
        from: Desde
        to: Hasta
    From: Desde
    To: Hasta
    Tractor Plate: Matrícula tractora
    Trailer Plate: Matrícula remolque
    Carrier: Transportista
    Price: Precio
    Driver name: Nombre del conductor
    Phone: Teléfono
</i18n>
