<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnConfirm from 'components/ui/VnConfirm.vue';

const $props = defineProps({
    order: {
        type: Object,
        required: true,
    },
});

const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n();
const order = ref($props.order);

function confirmRemove() {
    quasar
        .dialog({
            component: VnConfirm,
            componentProps: {
                title: t('confirmDeletion'),
                message: t('confirmDeletionMessage'),
                promise: remove,
            },
        })
        .onOk(async () => await router.push({ name: 'OrderList' }));
}

async function remove() {
    const id = order.value.id;
    await axios.delete(`Orders/${id}`);
    quasar.notify({
        message: t('globals.dataDeleted'),
        type: 'positive',
    });
}
</script>
<template>
    <QItem @click="confirmRemove()" 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:
    deleteOrder: Eliminar pedido
    confirmDeletion: Confirmar eliminación
    confirmDeletionMessage: Seguro que quieres eliminar este pedido?

</i18n>
