<script setup>
import { onMounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import EntryFilter from './EntryFilter.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
import VnTable from 'components/VnTable/VnTable.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import { toDate } from 'src/filters';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import EntrySummary from './Card/EntrySummary.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';

const stateStore = useStateStore();
const { t } = useI18n();
const tableRef = ref();

const { viewSummary } = useSummaryDialog();
const entryFilter = {
    include: [
        {
            relation: 'suppliers',
            scope: {
                fields: ['id', 'name'],
            },
        },
        {
            relation: 'travels',
            scope: {
                fields: ['id', 'ref'],
            },
        },
        {
            relation: 'companies',
            scope: {
                fields: ['id', 'code'],
            },
        },
    ],
};

const columns = computed(() => [
    {
        name: 'status',
        columnFilter: false,
    },
    {
        align: 'left',
        label: t('globals.id'),
        name: 'id',
        isTitle: true,
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('globals.reference'),
        name: 'reference',
        isTitle: true,
        component: 'input',
        columnField: {
            component: null,
        },
        create: true,
        cardVisible: true,
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.created'),
        name: 'created',
        create: true,
        cardVisible: true,
        component: 'date',
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.created)),
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.supplierFk'),
        name: 'supplierFk',
        create: true,
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'suppliers',
            fields: ['id', 'name'],
        },
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row.supplierName),
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.isBooked'),
        name: 'isBooked',
        cardVisible: true,
        create: true,
        component: 'checkbox',
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.isConfirmed'),
        name: 'isConfirmed',
        cardVisible: true,
        create: true,
        component: 'checkbox',
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.isOrdered'),
        name: 'isOrdered',
        cardVisible: true,
        create: true,
        component: 'checkbox',
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.companyFk'),
        name: 'companyFk',
        component: 'select',
        attrs: {
            url: 'companies',
            fields: ['id', 'code'],
            optionLabel: 'code',
            optionValue: 'id',
        },
        columnField: {
            component: null,
        },
        create: true,

        format: (row, dashIfEmpty) => dashIfEmpty(row.companyCode),
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.travelFk'),
        name: 'travelFk',
        component: 'select',
        attrs: {
            url: 'travels',
            fields: ['id', 'ref'],
            optionLabel: 'ref',
            optionValue: 'id',
        },
        columnField: {
            component: null,
        },
        create: true,
        format: (row, dashIfEmpty) => dashIfEmpty(row.travelRef),
    },
    {
        align: 'left',
        label: t('entry.list.tableVisibleColumns.invoiceAmount'),
        name: 'invoiceAmount',
        cardVisible: true,
    },
    {
        label: t('entry.list.tableVisibleColumns.isExcludedFromAvailable'),
        name: 'isExcludedFromAvailable',
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, EntrySummary),
                isPrimary: true,
            },
        ],
    },
]);
onMounted(async () => {
    stateStore.rightDrawer = true;
});
</script>
<template>
    <VnSearchbar
        data-key="EntryList"
        url="Entries/filter"
        :label="t('Search entries')"
        :info="t('You can search by entry reference')"
    />
    <RightMenu>
        <template #right-panel>
            <EntryFilter data-key="EntryList" />
        </template>
    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="EntryList"
        url="Entries/filter"
        :filter="entryFilter"
        :create="{
            urlCreate: 'Entries',
            title: t('Create entry'),
            onDataSaved: ({ id }) => tableRef.redirect(id),
            formInitialData: {},
        }"
        order="id DESC"
        :columns="columns"
        redirect="entry"
        auto-load
        :right-search="false"
    >
        <template #column-status="{ row }">
            <div class="row q-gutter-xs">
                <QIcon
                    v-if="!!row.isExcludedFromAvailable"
                    name="vn:inventory"
                    color="primary"
                >
                    <QTooltip>{{
                        t('entry.list.tableVisibleColumns.isExcludedFromAvailable')
                    }}</QTooltip>
                </QIcon>
                <QIcon v-if="!!row.isRaid" name="vn:net" color="primary">
                    <QTooltip>
                        {{
                            t('globals.raid', { daysInForward: row.daysInForward })
                        }}</QTooltip
                    >
                </QIcon>
            </div>
        </template>
        <template #column-supplierFk="{ row }">
            <span class="link" @click.stop>
                {{ row.supplierName }}
                <SupplierDescriptorProxy :id="row.supplierFk" />
            </span>
        </template>
        <template #column-travelFk="{ row }">
            <span class="link" @click.stop>
                {{ row.travelRef }}
                <TravelDescriptorProxy :id="row.travelFk" />
            </span>
        </template>
    </VnTable>
</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
</i18n>
