<script setup>
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { dialog, notify } = useQuasar();

import VnConfirm from 'components/ui/VnConfirm.vue';

import axios from 'axios';

const $props = defineProps({
    zone: {
        type: Object,
        default: () => {},
    },
});

const { t } = useI18n();
const { push, currentRoute } = useRouter();
const zoneId = currentRoute.value.params.id;

const actions = {
    clone: async () => {
        const opts = { message: t('Zone cloned'), type: 'positive' };
        let clonedZoneId;

        try {
            const { data } = await axios.post(`Zones/${zoneId}/clone`, {
                shipped: $props.zone.value.shipped,
            });
            clonedZoneId = data;
        } catch (e) {
            opts.message = t('It was not able to clone the zone');
            opts.type = 'negative';
        } finally {
            notify(opts);

            if (clonedZoneId) push({ name: 'ZoneSummary', params: { id: clonedZoneId } });
        }
    },
    remove: async () => {
        try {
            await axios.post(`Zones/${zoneId}/setDeleted`);

            notify({ message: t('Zone deleted'), type: 'positive' });
            notify({
                message: t('You can undo this action within the first hour'),
                icon: 'info',
            });

            push({ name: 'ZoneList' });
        } catch (e) {
            notify({ message: e.message, type: 'negative' });
        }
    },
};
function openConfirmDialog(callback) {
    dialog({
        component: VnConfirm,
        componentProps: {
            promise: actions[callback],
        },
    });
}
</script>
<template>
    <QItem @click="openConfirmDialog('clone')" v-ripple clickable>
        <QItemSection avatar>
            <QIcon name="content_copy" />
        </QItemSection>
        <QItemSection>{{ t('To clone zone') }}</QItemSection>
    </QItem>
    <QItem @click="openConfirmDialog('remove')" v-ripple clickable>
        <QItemSection avatar>
            <QIcon name="delete" />
        </QItemSection>
        <QItemSection>{{ t('deleteOrder') }}</QItemSection>
    </QItem>
</template>

<i18n>
en:
    deleteOrder: Delete order
    confirmDeletion: Confirm deletion
    confirmDeletionMessage: Are you sure you want to delete this order?

es:
    To clone zone: Clonar zone
    deleteOrder: Eliminar pedido
    confirmDeletion: Confirmar eliminación
    confirmDeletionMessage: Seguro que quieres eliminar este pedido?

</i18n>
