<script setup>
import { ref, computed, markRaw } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import VnLocation from 'src/components/common/VnLocation.vue';
import VnSearchbar from 'components/ui/VnSearchbar.vue';
import CustomerSummary from './Card/CustomerSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
import { toDate } from 'src/filters';
import CustomerFilter from './CustomerFilter.vue';

const { t } = useI18n();
const router = useRouter();

const tableRef = ref();

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('customer.extendedList.tableVisibleColumns.id'),
        chip: {
            condition: () => true,
        },
        isId: true,
        columnFilter: {
            component: 'select',
            name: 'search',
            attrs: {
                url: 'Clients',
                fields: ['id', 'name'],
            },
        },
    },
    {
        align: 'left',
        label: t('globals.name'),
        name: 'name',
        isTitle: true,
        create: true,
        columnClass: 'expand',
    },
    {
        align: 'left',
        name: 'socialName',
        label: t('customer.extendedList.tableVisibleColumns.socialName'),
        isTitle: true,
        create: true,
        columnClass: 'expand',
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.fi'),
        name: 'fi',
        create: true,
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
        name: 'salesPersonFk',
        component: 'select',
        attrs: {
            url: 'Workers/activeWithInheritedRole',
            fields: ['id', 'name'],
            where: { role: 'salesPerson' },
            optionFilter: 'firstName',
            useLike: false,
        },
        create: false,
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.salesPerson),
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.credit'),
        name: 'credit',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
        name: 'creditInsurance',
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.phone'),
        name: 'phone',
        cardVisible: true,
        columnFilter: {
            component: 'number',
        },
        columnField: {
            component: null,
            after: {
                component: markRaw(VnLinkPhone),
                attrs: ({ model }) => {
                    return {
                        'phone-number': model,
                    };
                },
            },
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.mobile'),
        name: 'mobile',
        cardVisible: true,
        columnFilter: {
            component: 'number',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.street'),
        name: 'street',
        create: true,
        columnFilter: {
            inWhere: true,
        },
        columnClass: 'expand',
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.countryFk'),
        name: 'countryFk',
        columnFilter: {
            component: 'select',
            inWhere: true,
            alias: 'c',
            attrs: {
                url: 'Countries',
            },
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.country),
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
        name: 'provinceFk',
        component: 'select',
        attrs: {
            url: 'Provinces',
        },
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.province),
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.city'),
        name: 'city',
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.postcode'),
        name: 'postcode',
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.email'),
        name: 'email',
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.created'),
        name: 'created',
        format: ({ created }) => toDate(created),
        columnFilter: {
            component: 'date',
            alias: 'c',
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
        name: 'businessTypeFk',
        create: true,
        component: 'select',
        attrs: {
            url: 'BusinessTypes',
            fields: ['code', 'description'],
            sortBy: 'description ASC ',
            optionLabel: 'description',
            optionValue: 'code',
        },
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.businessType),
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
        name: 'payMethodFk',
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'PayMethods',
            },
            inWhere: true,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.payMethod),
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
        name: 'sageTaxTypeFk',
        columnFilter: {
            component: 'select',
            attrs: {
                optionLabel: 'vat',
                url: 'SageTaxTypes',
            },
            alias: 'sti',
            inWhere: true,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.sageTaxType),
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
        name: 'sageTransactionTypeFk',
        columnFilter: {
            component: 'select',
            attrs: {
                optionLabel: 'transaction',
                url: 'SageTransactionTypes',
            },
            alias: 'stt',
            inWhere: true,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.sageTransactionType),
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.isActive'),
        name: 'isActive',
        chip: {
            color: null,
            condition: (value) => !value,
            icon: 'vn:disabled',
        },
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.isVies'),
        name: 'isVies',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
        name: 'isTaxDataChecked',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
        name: 'isEqualizated',
        create: true,
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
        name: 'isFreezed',
        chip: {
            color: null,
            condition: (value) => value,
            icon: 'vn:frozen',
        },
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
        name: 'hasToInvoice',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
        name: 'hasToInvoiceByAddress',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
        name: 'isToBeMailed',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
        name: 'hasLcr',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
        name: 'hasCoreVnl',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
        name: 'hasSepaVnl',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('Client ticket list'),
                icon: 'vn:ticket',
                action: redirectToTicketsList,
                isPrimary: true,
            },
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                isPrimary: true,
                action: (row) => viewSummary(row.id, CustomerSummary),
            },
        ],
    },
]);

const { viewSummary } = useSummaryDialog();
const redirectToTicketsList = (row) => {
    router.push({
        name: 'TicketList',

        query: {
            table: JSON.stringify({
                clientFk: row.id,
            }),
        },
    });
};

function handleLocation(data, location) {
    const { town, code, provinceFk, countryFk } = location ?? {};
    data.postcode = code;
    data.city = town;
    data.provinceFk = provinceFk;
    data.countryFk = countryFk;
}
</script>

<template>
    <VnSearchbar
        :info="t('You can search by customer id or name')"
        :label="t('Search customer')"
        data-key="Customer"
    />
    <RightMenu>
        <template #right-panel>
            <CustomerFilter data-key="Customer" />
        </template>
    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="Customer"
        url="Clients/filter"
        :create="{
            urlCreate: 'Clients/createWithUser',
            title: t('globals.pageTitles.customerCreate'),
            onDataSaved: ({ id }) => tableRef.redirect(id),
            formInitialData: {
                active: true,
                isEqualizated: false,
            },
        }"
        order="id DESC"
        :columns="columns"
        redirect="customer"
        :right-search="false"
        auto-load
    >
        <template #more-create-dialog="{ data }">
            <VnSelect
                url="Workers/search"
                v-model="data.salesPersonFk"
                :label="t('customer.basicData.salesPerson')"
                :params="{
                    departmentCodes: ['VT', 'shopping'],
                }"
                option-label="nickname"
                option-value="id"
                :fields="['id', 'nickname']"
                sort-by="nickname ASC"
                emit-value
                auto-load
            >
                <template #prepend>
                    <VnAvatar
                        :worker-id="data.salesPersonFk"
                        color="primary"
                        :title="title"
                    />
                </template>
                <template #option="scope">
                    <QItem v-bind="scope.itemProps">
                        <QItemSection>
                            <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
                            <QItemLabel caption
                                >{{ scope.opt?.nickname }},
                                {{ scope.opt?.code }}</QItemLabel
                            >
                        </QItemSection>
                    </QItem>
                </template>
            </VnSelect>

            <VnLocation
                :acls="[{ model: 'Province', props: '*', accessType: 'WRITE' }]"
                v-model="data.location"
                @update:model-value="(location) => handleLocation(data, location)"
            />
            <QInput v-model="data.userName" :label="t('Web user')" />
            <QInput :label="t('Email')" clearable type="email" v-model="data.email">
                <template #append>
                    <QIcon name="info" class="cursor-info">
                        <QTooltip max-width="400px">{{
                            t('customer.basicData.youCanSaveMultipleEmails')
                        }}</QTooltip>
                    </QIcon>
                </template>
            </QInput>
        </template>
    </VnTable>
</template>
<i18n>
es:
    Web user: Usuario Web
</i18n>
<style lang="scss" scoped>
.col-content {
    border-radius: 4px;
    padding: 6px;
}
</style>