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

import VnPaginate from 'components/ui/VnPaginate.vue';
import ZoneCreateWarehouse from './ZoneCreateWarehouse.vue';

import { useVnConfirm } from 'composables/useVnConfirm';
import { useArrayData } from 'composables/useArrayData';
import axios from 'axios';

const { t } = useI18n();
const route = useRoute();
const { openConfirmationModal } = useVnConfirm();

const paginateRef = ref();
const createWarehouseDialogRef = ref(null);

const arrayData = useArrayData('ZoneWarehouses');
const store = arrayData.store;

const data = computed(() => store.data);

const urlPath = computed(() => `Zones/${route.params.id}/warehouses`);

const columns = computed(() => [
    {
        name: 'name',
    },
    {
        name: 'action',
    },
]);

const deleteWarehouse = async (row) => {
    try {
        await axios.delete(`${urlPath.value}/${row.id}`);
        fetchWarehouses();
    } catch (error) {
        console.error(error);
    }
};

const createZoneWarehouse = async (ZoneWarehouseFormData) => {
    try {
        await axios.post(urlPath.value, ZoneWarehouseFormData);
        fetchWarehouses();
    } catch (error) {
        console.error(error);
    }
};

watch(
    () => route.params.id,
    () => {
        store.url = urlPath.value;
        store.filter.include = 'warehouse';
        fetchWarehouses();
    }
);

const fetchWarehouses = () => paginateRef.value.fetch();

const openCreateWarehouseForm = () => createWarehouseDialogRef.value.show();
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <div class="full-width" style="max-width: 400px">
            <VnPaginate
                ref="paginateRef"
                data-key="ZoneWarehouses"
                :filter="{ include: 'warehouse' }"
                :url="urlPath"
                auto-load
            >
                <template #body="{ rows }">
                    <QTable :rows="data" :columns="columns" hide-header>
                        <template #body="{ row, rowIndex }">
                            <QTr>
                                <QTd>
                                    <span>{{ row.warehouse?.name }}</span>
                                </QTd>
                                <QTd style="width: 50px !important">
                                    <QIcon
                                        name="delete"
                                        size="sm"
                                        class="cursor-pointer"
                                        color="primary"
                                        @click="
                                            openConfirmationModal(
                                                t('warehouses.deleteTitle'),
                                                t('warehouses.deleteSubtitle'),
                                                () => deleteWarehouse(row, rows, rowIndex)
                                            )
                                        "
                                    >
                                        <QTooltip>
                                            {{ t('warehouses.delete') }}
                                        </QTooltip>
                                    </QIcon>
                                </QTd>
                            </QTr>
                        </template>
                    </QTable>
                </template>
            </VnPaginate>
        </div>
        <QDialog ref="createWarehouseDialogRef">
            <ZoneCreateWarehouse @on-submit-create-warehouse="createZoneWarehouse" />
        </QDialog>
        <QPageSticky position="bottom-right" :offset="[18, 18]">
            <QBtn
                fab
                icon="add"
                color="primary"
                @click="openCreateWarehouseForm()"
                shortcut="+"
            >
                <QTooltip>{{ t('warehouses.add') }}</QTooltip>
            </QBtn>
        </QPageSticky>
    </QPage>
</template>
