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

import FetchData from 'components/FetchData.vue';
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import { dateRange } from 'src/filters';

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

const { t } = useI18n();

const clients = ref();
const workers = ref();
const countriesOptions = ref([]);
const provincesOptions = ref([]);
const paymethodsOptions = ref([]);
const businessTypesOptions = ref([]);
const sageTaxTypesOptions = ref([]);
const sageTransactionTypesOptions = ref([]);

const visibleColumnsSet = computed(() => new Set(props.visibleColumns));

const exprBuilder = (param, value) => {
    switch (param) {
        case 'created':
            return {
                'c.created': {
                    between: dateRange(value),
                },
            };
        case 'id':
        case 'name':
        case 'socialName':
        case 'fi':
        case 'credit':
        case 'creditInsurance':
        case 'phone':
        case 'mobile':
        case 'street':
        case 'city':
        case 'postcode':
        case 'email':
        case 'isActive':
        case 'isVies':
        case 'isTaxDataChecked':
        case 'isEqualizated':
        case 'isFreezed':
        case 'hasToInvoice':
        case 'hasToInvoiceByAddress':
        case 'isToBeMailed':
        case 'hasSepaVnl':
        case 'hasLcr':
        case 'hasCoreVnl':
        case 'countryFk':
        case 'provinceFk':
        case 'salesPersonFk':
        case 'businessTypeFk':
        case 'payMethodFk':
        case 'sageTaxTypeFk':
        case 'sageTransactionTypeFk':
            return { [`c.${param}`]: value };
    }
};

const shouldRenderColumn = (colName) => {
    return visibleColumnsSet.value.has(colName);
};
</script>

<template>
    <FetchData
        url="Clients"
        :filter="{ where: { role: 'socialName' } }"
        @on-fetch="(data) => (clients = data)"
        auto-load
    />
    <FetchData
        url="Workers/activeWithInheritedRole"
        :filter="{ where: { role: 'salesPerson' } }"
        @on-fetch="(data) => (workers = data)"
        auto-load
    />
    <FetchData
        url="Workers/activeWithInheritedRole"
        :filter="{ where: { role: 'salesPerson' } }"
        @on-fetch="(data) => (workers = data)"
        auto-load
    />
    <FetchData
        url="Countries"
        :filter="{ fields: ['id', 'country'], order: 'country ASC' }"
        @on-fetch="(data) => (countriesOptions = data)"
        auto-load
    />
    <FetchData
        ref="provincesFetchDataRef"
        @on-fetch="(data) => (provincesOptions = data)"
        auto-load
        url="Provinces"
    />
    <FetchData
        url="Paymethods"
        @on-fetch="(data) => (paymethodsOptions = data)"
        auto-load
    />
    <FetchData
        url="BusinessTypes"
        @on-fetch="(data) => (businessTypesOptions = data)"
        auto-load
    />
    <FetchData
        url="SageTaxTypes"
        auto-load
        @on-fetch="(data) => (sageTaxTypesOptions = data)"
    />
    <FetchData
        url="sageTransactionTypes"
        auto-load
        @on-fetch="(data) => (sageTransactionTypesOptions = data)"
    />
    <VnFilterPanel
        :data-key="props.dataKey"
        :search-button="true"
        :expr-builder="exprBuilder"
    >
        <template #tags="{ tag, formatFn }">
            <div class="q-gutter-x-xs">
                <strong
                    >{{ t(`customer.extendedList.tableVisibleColumns.${tag.label}`) }}:
                </strong>
                <span>{{ formatFn(tag.value) }}</span>
            </div>
        </template>
        <template #body="{ params, searchFn }">
            <QItem v-if="shouldRenderColumn('id')">
                <QItemSection>
                    <VnInput
                        :label="t('customer.extendedList.tableVisibleColumns.id')"
                        v-model="params.id"
                        is-outlined
                        clearable
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('name')">
                <QItemSection>
                    <VnInput
                        :label="t('customer.extendedList.tableVisibleColumns.name')"
                        v-model="params.name"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <!-- <QItem class="q-mb-sm">
                    <QItemSection v-if="!clients">
                        <QSkeleton type="QInput" class="full-width" />
                    </QItemSection>
                    <QItemSection v-if="clients">
                        <VnSelectFilter
                            :label="t('Social name')"
                            v-model="params.socialName"
                            @update:model-value="searchFn()"
                            :options="clients"
                            option-value="socialName"
                            option-label="socialName"
                            emit-value
                            map-options
                            use-input
                            hide-selected
                            dense
                            outlined
                            rounded
                            :input-debounce="0"
                        />
                    </QItemSection>
                </QItem> -->
            <QItem v-if="shouldRenderColumn('fi')">
                <QItemSection>
                    <VnInput
                        :label="t('customer.extendedList.tableVisibleColumns.fi')"
                        v-model="params.fi"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('salesPersonFk')">
                <QItemSection v-if="!workers">
                    <QSkeleton type="QInput" class="full-width" />
                </QItemSection>
                <QItemSection v-if="workers">
                    <VnSelectFilter
                        :label="
                            t('customer.extendedList.tableVisibleColumns.salesPersonFk')
                        "
                        v-model="params.salesPersonFk"
                        @update:model-value="searchFn()"
                        :options="workers"
                        option-value="id"
                        option-label="name"
                        emit-value
                        map-options
                        use-input
                        hide-selected
                        dense
                        outlined
                        rounded
                        :input-debounce="0"
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('credit')">
                <QItemSection>
                    <VnInput
                        :label="t('customer.extendedList.tableVisibleColumns.credit')"
                        v-model="params.credit"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('creditInsurance')">
                <QItemSection>
                    <VnInput
                        :label="
                            t('customer.extendedList.tableVisibleColumns.creditInsurance')
                        "
                        v-model="params.creditInsurance"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('phone')">
                <QItemSection>
                    <VnInput
                        :label="t('customer.extendedList.tableVisibleColumns.phone')"
                        v-model="params.phone"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('mobile')">
                <QItemSection>
                    <VnInput
                        :label="t('customer.extendedList.tableVisibleColumns.mobile')"
                        v-model="params.mobile"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('street')">
                <QItemSection>
                    <VnInput
                        :label="t('customer.extendedList.tableVisibleColumns.street')"
                        v-model="params.street"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('countryFk')">
                <QItemSection>
                    <VnSelectFilter
                        :label="t('customer.extendedList.tableVisibleColumns.countryFk')"
                        v-model="params.countryFk"
                        @update:model-value="searchFn()"
                        :options="countriesOptions"
                        option-value="id"
                        option-label="country"
                        map-options
                        hide-selected
                        dense
                        outlined
                        rounded
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('provinceFk')">
                <QItemSection>
                    <VnSelectFilter
                        :label="t('customer.extendedList.tableVisibleColumns.provinceFk')"
                        v-model="params.provinceFk"
                        @update:model-value="searchFn()"
                        :options="provincesOptions"
                        option-value="id"
                        option-label="name"
                        map-options
                        hide-selected
                        dense
                        outlined
                        rounded
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('city')">
                <QItemSection>
                    <VnInput
                        :label="t('customer.extendedList.tableVisibleColumns.city')"
                        v-model="params.city"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('postcode')">
                <QItemSection>
                    <VnInput
                        :label="t('customer.extendedList.tableVisibleColumns.postcode')"
                        v-model="params.postcode"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('email')">
                <QItemSection>
                    <VnInput
                        :label="t('customer.extendedList.tableVisibleColumns.email')"
                        v-model="params.email"
                        is-outlined
                    />
                </QItemSection>
            </QItem>

            <QItem v-if="shouldRenderColumn('created')">
                <QItemSection>
                    <VnInputDate
                        v-model="params.created"
                        :label="t('customer.extendedList.tableVisibleColumns.created')"
                        @update:model-value="searchFn()"
                        is-outlined
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('businessTypeFk')">
                <QItemSection>
                    <VnSelectFilter
                        :label="
                            t('customer.extendedList.tableVisibleColumns.businessTypeFk')
                        "
                        v-model="params.businessTypeFk"
                        :options="businessTypesOptions"
                        @update:model-value="searchFn()"
                        option-value="code"
                        option-label="description"
                        map-options
                        hide-selected
                        dense
                        outlined
                        rounded
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('payMethodFk')">
                <QItemSection>
                    <VnSelectFilter
                        :label="
                            t('customer.extendedList.tableVisibleColumns.payMethodFk')
                        "
                        v-model="params.payMethodFk"
                        :options="paymethodsOptions"
                        @update:model-value="searchFn()"
                        option-value="id"
                        option-label="name"
                        map-options
                        hide-selected
                        dense
                        outlined
                        rounded
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('sageTaxTypeFk')">
                <QItemSection>
                    <VnSelectFilter
                        :label="
                            t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk')
                        "
                        v-model="params.sageTaxTypeFk"
                        @update:model-value="searchFn()"
                        :options="sageTaxTypesOptions"
                        option-value="id"
                        option-label="vat"
                        map-options
                        hide-selected
                        dense
                        outlined
                        rounded
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('sageTransactionTypeFk')">
                <QItemSection>
                    <VnSelectFilter
                        :label="
                            t(
                                'customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'
                            )
                        "
                        v-model="params.sageTransactionTypeFk"
                        @update:model-value="searchFn()"
                        :options="sageTransactionTypesOptions"
                        option-value="id"
                        option-label="transaction"
                        map-options
                        hide-selected
                        dense
                        outlined
                        rounded
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')">
                <QItemSection v-if="shouldRenderColumn('isActive')">
                    <QCheckbox
                        v-model="params.isActive"
                        @update:model-value="searchFn()"
                        :label="t('customer.extendedList.tableVisibleColumns.isActive')"
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
                <QItemSection v-if="shouldRenderColumn('isVies')">
                    <QCheckbox
                        v-model="params.isVies"
                        @update:model-value="searchFn()"
                        :label="t('customer.extendedList.tableVisibleColumns.isVies')"
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
            </QItem>
            <QItem
                v-if="
                    shouldRenderColumn('isEqualizated') ||
                    shouldRenderColumn('isTaxDataChecked')
                "
            >
                <QItemSection v-if="shouldRenderColumn('isTaxDataChecked')">
                    <QCheckbox
                        v-model="params.isTaxDataChecked"
                        @update:model-value="searchFn()"
                        :label="
                            t(
                                'customer.extendedList.tableVisibleColumns.isTaxDataChecked'
                            )
                        "
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
                <QItemSection v-if="shouldRenderColumn('isEqualizated')">
                    <QCheckbox
                        v-model="params.isEqualizated"
                        @update:model-value="searchFn()"
                        :label="
                            t('customer.extendedList.tableVisibleColumns.isEqualizated')
                        "
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
            </QItem>
            <QItem
                v-if="
                    shouldRenderColumn('hasToInvoice') || shouldRenderColumn('isFreezed')
                "
            >
                <QItemSection v-if="shouldRenderColumn('isFreezed')">
                    <QCheckbox
                        v-model="params.isFreezed"
                        @update:model-value="searchFn()"
                        :label="t('customer.extendedList.tableVisibleColumns.isFreezed')"
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
                <QItemSection v-if="shouldRenderColumn('hasToInvoice')">
                    <QCheckbox
                        v-model="params.hasToInvoice"
                        @update:model-value="searchFn()"
                        :label="
                            t('customer.extendedList.tableVisibleColumns.hasToInvoice')
                        "
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
            </QItem>
            <QItem
                v-if="
                    shouldRenderColumn('isToBeMailed') ||
                    shouldRenderColumn('hasToInvoiceByAddress')
                "
            >
                <QItemSection v-if="shouldRenderColumn('hasToInvoiceByAddress')">
                    <QCheckbox
                        v-model="params.hasToInvoiceByAddress"
                        @update:model-value="searchFn()"
                        :label="
                            t(
                                'customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'
                            )
                        "
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
                <QItemSection v-if="shouldRenderColumn('isToBeMailed')">
                    <QCheckbox
                        v-model="params.isToBeMailed"
                        @update:model-value="searchFn()"
                        :label="
                            t('customer.extendedList.tableVisibleColumns.isToBeMailed')
                        "
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
            </QItem>
            <QItem
                v-if="shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')"
            >
                <QItemSection v-if="shouldRenderColumn('hasLcr')">
                    <QCheckbox
                        v-model="params.hasLcr"
                        @update:model-value="searchFn()"
                        :label="t('customer.extendedList.tableVisibleColumns.hasLcr')"
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
                <QItemSection v-if="shouldRenderColumn('hasCoreVnl')">
                    <QCheckbox
                        v-model="params.hasCoreVnl"
                        @update:model-value="searchFn()"
                        :label="t('customer.extendedList.tableVisibleColumns.hasCoreVnl')"
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
            </QItem>
            <QItem v-if="shouldRenderColumn('hasSepaVnl')">
                <QItemSection>
                    <QCheckbox
                        v-model="params.hasSepaVnl"
                        @update:model-value="searchFn()"
                        :label="t('customer.extendedList.tableVisibleColumns.hasSepaVnl')"
                        toggle-indeterminate
                        :false-value="undefined"
                    />
                </QItemSection>
            </QItem>

            <QSeparator />
        </template>
    </VnFilterPanel>
</template>

<i18n>
es:
    Social name: Razón social
</i18n>
