<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 { t } = useI18n();
const { push, currentRoute } = useRouter();
const zoneId = currentRoute.value.params.id;

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

        const { data } = await axios.post(`Zones/${zoneId}/clone`, {});
        notify(opts);
        push(`/zone/${data.id}/basic-data`);
    },
    remove: async () => {
        await axios.post(`Zones/${zoneId}/deleteZone`);
        notify({ message: t('Zone deleted'), type: 'positive' });
        push({ name: 'ZoneList' });
    },
};
function openConfirmDialog(callback) {
    dialog({
        component: VnConfirm,
        componentProps: {
            promise: actions[callback],
        },
    });
}
</script>
<template>
    <QItem
        @click="openConfirmDialog('remove')"
        v-ripple
        clickable
        data-cy="Delete_button"
    >
        <QItemSection avatar>
            <QIcon name="delete" />
        </QItemSection>
        <QItemSection>{{ t('deleteZone') }}</QItemSection>
    </QItem>
    <QItem @click="openConfirmDialog('clone')" v-ripple clickable data-cy="Clone_button">
        <QItemSection avatar>
            <QIcon name="content_copy" />
        </QItemSection>
        <QItemSection>{{ t('cloneZone') }}</QItemSection>
    </QItem>
</template>

<i18n>
en:
    deleteZone: Delete
    cloneZone: Clone
    confirmDeletion: Confirm deletion
    confirmDeletionMessage: Are you sure you want to delete this zone?

es:
    cloneZone: Clonar
    deleteZone: Eliminar
    confirmDeletion: Confirmar eliminación
    confirmDeletionMessage: Seguro que quieres eliminar este zona?
    Zone deleted: Zona eliminada
</i18n>
