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

import { toCurrency } from 'src/filters';
import { toTimeFormat } from 'src/filters/date';
import { useVnConfirm } from 'composables/useVnConfirm';
import useNotify from 'src/composables/useNotify.js';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useStateStore } from 'stores/useStateStore';
import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputTime from 'src/components/common/VnInputTime.vue';
import RightMenu from 'src/components/common/RightMenu.vue';
import ZoneFilterPanel from './ZoneFilterPanel.vue';
import ZoneSearchbar from './Card/ZoneSearchbar.vue';

const { t } = useI18n();
const router = useRouter();
const { notify } = useNotify();
const { viewSummary } = useSummaryDialog();
const { openConfirmationModal } = useVnConfirm();
const stateStore = useStateStore();
const tableRef = ref();
const warehouseOptions = ref([]);

const tableFilter = {
    include: [
        {
            relation: 'agencyMode',
            scope: {
                fields: ['id', 'name'],
            },
        },
    ],
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('list.id'),
        chip: {
            condition: () => true,
        },
        isId: true,
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        name: 'name',
        label: t('list.name'),
        isTitle: true,
        create: true,
        columnFilter: {
            optionLabel: 'name',
            optionValue: 'id',
        },
    },
    {
        align: 'left',
        name: 'agencyModeFk',
        label: t('list.agency'),
        cardVisible: true,
        columnFilter: {
            component: 'select',
            inWhere: true,
            attrs: {
                url: 'AgencyModes',
            },
        },
        columnField: {
            component: null,
        },
        format: (row, dashIfEmpty) => dashIfEmpty(row?.agencyMode?.name),
    },
    {
        align: 'left',
        name: 'price',
        label: t('list.price'),
        cardVisible: true,
        format: (row) => toCurrency(row.price),
        columnFilter: {
            inWhere: true,
        },
    },
    {
        align: 'left',
        name: 'hour',
        label: t('list.close'),
        cardVisible: true,
        format: (row) => toTimeFormat(row.hour),
        hidden: true,
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, ZoneSummary),
                isPrimary: true,
            },
            {
                title: t('globals.clone'),
                icon: 'vn:clone',
                action: (row) => handleClone(row.id),
                isPrimary: true,
            },
        ],
    },
]);

async function clone(id) {
    const { data } = await axios.post(`Zones/${id}/clone`);
    notify(t('globals.dataSaved'), 'positive');
    router.push({ name: 'ZoneBasicData', params: { id: data.id } });
}
const handleClone = (id) => {
    openConfirmationModal(
        t('list.confirmCloneTitle'),
        t('list.confirmCloneSubtitle'),
        () => clone(id)
    );
};

onMounted(() => (stateStore.rightDrawer = true));
</script>

<template>
    <ZoneSearchbar />
    <RightMenu>
        <template #right-panel>
            <ZoneFilterPanel data-key="Zones" />
        </template>
    </RightMenu>
    <VnTable
        ref="tableRef"
        data-key="Zones"
        url="Zones"
        :create="{
            urlCreate: 'Zones',
            title: t('list.createZone'),
            onDataSaved: ({ id }) => tableRef.redirect(`${id}/location`),
            formInitialData: {},
        }"
        :user-filter="tableFilter"
        :columns="columns"
        redirect="zone"
        :right-search="false"
        auto-load
    >
        <template #more-create-dialog="{ data }">
            <VnSelect
                url="AgencyModes"
                v-model="data.agencyModeFk"
                option-value="id"
                option-label="name"
                :label="t('list.agency')"
            />
            <VnInput
                v-model="data.price"
                :label="t('list.price')"
                min="0"
                type="number"
                required="true"
            />
            <VnInput
                v-model="data.bonus"
                :label="t('list.bonus')"
                min="0"
                type="number"
            />
            <VnInput
                v-model="data.travelingDays"
                :label="t('list.travelingDays')"
                type="number"
                min="0"
            />
            <VnInputTime v-model="data.hour" :label="t('list.close')" />
            <VnSelect
                url="Warehouses"
                v-model="data.warehouseFK"
                option-value="id"
                option-label="name"
                :label="t('list.warehouse')"
                :options="warehouseOptions"
            />
            <QCheckbox
                v-model="data.isVolumetric"
                :label="t('list.isVolumetric')"
                :toggle-indeterminate="false"
            />
        </template>
    </VnTable>
</template>

<i18n>
es:
    Search zone: Buscar zona
    You can search zones by id or name: Puedes buscar zonas por id o nombre
</i18n>
