<script setup>
import axios from 'axios';
import VnSection from 'src/components/common/VnSection.vue';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import { onBeforeMount } from 'vue';

import EntryFilter from './EntryFilter.vue';
import VnTable from 'components/VnTable/VnTable.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import VnSelectTravelExtended from 'src/components/common/VnSelectTravelExtended.vue';
import { toDate } from 'src/filters';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import EntrySummary from './Card/EntrySummary.vue';

const { t } = useI18n();
const tableRef = ref();
const defaultEntry = ref({});
const state = useState();
const user = state.getUser();
const dataKey = 'EntryList';
const { viewSummary } = useSummaryDialog();

const entryQueryFilter = {
    include: [
        {
            relation: 'suppliers',
            scope: {
                fields: ['id', 'name'],
            },
        },
        {
            relation: 'travels',
            scope: {
                fields: ['id', 'ref'],
            },
        },
        {
            relation: 'companies',
            scope: {
                fields: ['id', 'code'],
            },
        },
    ],
};

const columns = computed(() => [
    {
        labelAbbreviation: 'Ex',
        label: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
        toolTip: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
        name: 'isExcludedFromAvailable',
        component: 'checkbox',
        width: '35px',
    },
    {
        labelAbbreviation: 'Pe',
        label: t('entry.list.tableVisibleColumns.isOrdered'),
        toolTip: t('entry.list.tableVisibleColumns.isOrdered'),
        name: 'isOrdered',
        component: 'checkbox',
        width: '35px',
    },
    {
        labelAbbreviation: 'LE',
        label: t('entry.list.tableVisibleColumns.isConfirmed'),
        toolTip: t('entry.list.tableVisibleColumns.isConfirmed'),
        name: 'isConfirmed',
        component: 'checkbox',
        width: '35px',
    },
    {
        labelAbbreviation: 'Re',
        label: t('entry.list.tableVisibleColumns.isReceived'),
        toolTip: t('entry.list.tableVisibleColumns.isReceived'),
        name: 'isReceived',
        component: 'checkbox',
        width: '35px',
    },
    {
        label: t('entry.list.tableVisibleColumns.landed'),
        name: 'landed',
        component: 'date',
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.landed)),
        width: '105px',
    },
    {
        label: t('globals.id'),
        name: 'id',
        isId: true,
        component: 'number',
        chip: {
            condition: () => true,
        },
        width: '50px',
    },
    {
        label: t('entry.list.tableVisibleColumns.supplierFk'),
        name: 'supplierFk',
        create: true,
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'suppliers',
            fields: ['id', 'name'],
            where: { order: 'name DESC' },
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.supplierName),
        width: '110px',
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.invoiceNumber'),
        name: 'invoiceNumber',
        component: 'input',
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.reference'),
        name: 'reference',
        isTitle: true,
        component: 'input',
        columnField: {
            component: null,
        },
        cardVisible: true,
    },
    {
        align: 'left',
        label: 'AWB',
        name: 'awbCode',
        component: 'input',
        width: '100px',
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.agencyModeId'),
        name: 'agencyModeId',
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'agencyModes',
            fields: ['id', 'name'],
        },
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.agencyModeName),
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.evaNotes'),
        name: 'evaNotes',
        component: 'input',
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.warehouseOutFk'),
        name: 'warehouseOutFk',
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'warehouses',
            fields: ['id', 'name'],
        },
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.warehouseOutName),
        width: '65px',
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.warehouseInFk'),
        name: 'warehouseInFk',
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'warehouses',
            fields: ['id', 'name'],
        },
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.warehouseInName),
        width: '65px',
    },
    {
        align: 'left',
        labelAbbreviation: t('Type'),
        label: t('entry.list.tableVisibleColumns.entryTypeDescription'),
        toolTip: t('entry.list.tableVisibleColumns.entryTypeDescription'),
        name: 'entryTypeCode',
        component: 'select',
        attrs: {
            url: 'entryTypes',
            fields: ['code', 'description'],
            optionValue: 'code',
            optionLabel: 'description',
        },
        width: '65px',
        format: (row, dashIfEmpty) => dashIfEmpty(row.entryTypeDescription),
    },
    {
        name: 'companyFk',
        label: t('entry.list.tableVisibleColumns.companyFk'),
        cardVisible: false,
        visible: false,
        create: true,
        component: 'select',
        attrs: {
            optionValue: 'id',
            optionLabel: 'code',
            url: 'Companies',
        },
    },
    {
        name: 'travelFk',
        label: t('entry.list.tableVisibleColumns.travelFk'),
        cardVisible: false,
        visible: false,
        create: true,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                isPrimary: true,
                action: (row) => viewSummary(row.id, EntrySummary, 'xlg-width'),
            },
        ],
    },
]);
function getBadgeAttrs(row) {
    const date = row.landed;
    let today = Date.vnNew();
    today.setHours(0, 0, 0, 0);
    let timeTicket = new Date(date);
    timeTicket.setHours(0, 0, 0, 0);

    let timeDiff = today - timeTicket;

    if (timeDiff > 0) return { color: 'info', 'text-color': 'black' };
    if (timeDiff < 0) return { color: 'warning', 'text-color': 'black' };
    switch (row.entryTypeCode) {
        case 'regularization':
        case 'life':
        case 'internal':
        case 'inventory':
            if (!row.isOrdered || !row.isConfirmed)
                return { color: 'negative', 'text-color': 'black' };
            break;
        case 'product':
        case 'packaging':
        case 'devaluation':
        case 'payment':
        case 'transport':
            if (
                row.invoiceAmount === null ||
                (row.invoiceNumber === null && row.reference === null) ||
                !row.isOrdered ||
                !row.isConfirmed
            )
                return { color: 'negative', 'text-color': 'black' };
            break;
        default:
            break;
    }
    return { color: 'transparent' };
}

onBeforeMount(async () => {
    defaultEntry.value = (await axios.get('EntryConfigs/findOne')).data;
});
</script>

<template>
    <VnSection
        :data-key="dataKey"
        prefix="entry"
        :array-data-props="{url='Entries/filter'}"
    >
        <template #advanced-menu>
            <EntryFilter :data-key="dataKey" />
        </template>
        <template #body>
            <VnTable
                v-if="defaultEntry.defaultSupplierFk"
                ref="tableRef"
                :data-key="dataKey"
                search-url="EntryList"
                url="Entries/filter"
                :filter="entryQueryFilter"
                order="landed DESC"
                :create="{
                    urlCreate: 'Entries',
                    title: t('Create entry'),
                    onDataSaved: ({ id }) => tableRef.redirect(id),
                    formInitialData: {
                        supplierFk: defaultEntry.defaultSupplierFk,
                        dated: Date.vnNew(),
                        companyFk: user?.companyFk,
                    },
                }"
                :columns="columns"
                redirect="entry"
                :right-search="false"
            >
                <template #column-landed="{ row }">
                    <QBadge
                        v-if="row?.travelFk"
                        v-bind="getBadgeAttrs(row)"
                        class="q-pa-sm"
                        style="font-size: 14px"
                    >
                        {{ toDate(row.landed) }}
                    </QBadge>
                </template>
                <template #column-supplierFk="{ row }">
                    <span class="link" @click.stop>
                        {{ row.supplierName }}
                        <SupplierDescriptorProxy :id="row.supplierFk" />
                    </span>
                </template>
                <template #column-create-travelFk="{ data }">
                    <VnSelectTravelExtended
                        :data="data"
                        v-model="data.travelFk"
                        :onFilterTravelSelected="
                            (data, result) => (data.travelFk = result)
                        "
                        data-cy="entry-travel-select"
                    />
                </template>
            </VnTable>
        </template>
    </VnSection>
</template>

<i18n>
es:
    Inventory entry: Es inventario
    Virtual entry: Es una redada
    Search entries: Buscar entradas
    You can search by entry reference: Puedes buscar por referencia de la entrada
    Create entry: Crear entrada
    Type: Tipo
</i18n>
