<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 { usePrintService } from 'composables/usePrintService';
import SendEmailDialog from 'components/common/SendEmailDialog.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';

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

const router = useRouter();
const quasar = useQuasar();
const { t } = useI18n();
const { openReport, sendEmail } = usePrintService();

const claim = ref($props.claim);

function openPickupOrder() {
    const id = claim.value.id;
    openReport(`Claims/${id}/claim-pickup-pdf`, {
        recipientId: claim.value.clientFk,
    });
}

function confirmPickupOrder() {
    const customer = claim.value.client;
    quasar.dialog({
        component: SendEmailDialog,
        componentProps: {
            data: {
                address: customer.email,
            },
            promise: sendPickupOrder,
        },
    });
}

function sendPickupOrder({ address }) {
    const id = claim.value.id;
    const customer = claim.value.client;
    return sendEmail(`Claims/${id}/claim-pickup-email`, {
        recipientId: customer.id,
        recipient: address,
    });
}

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

async function remove() {
    const id = claim.value.id;
    await axios.delete(`Claims/${id}`);
    quasar.notify({
        message: t('globals.dataDeleted'),
        type: 'positive',
    });
}
</script>
<template>
    <QItem v-ripple clickable>
        <QItemSection avatar>
            <QIcon name="summarize" />
        </QItemSection>
        <QItemSection>{{ t('pickupOrder') }}</QItemSection>
        <QItemSection side>
            <QIcon name="keyboard_arrow_right" />
        </QItemSection>
        <QMenu anchor="top end" self="top start" auto-close>
            <QList>
                <QItem @click="openPickupOrder" v-ripple clickable>
                    <QItemSection avatar>
                        <QIcon name="picture_as_pdf" />
                    </QItemSection>
                    <QItemSection>{{ t('openPickupOrder') }}</QItemSection>
                </QItem>
                <QItem @click="confirmPickupOrder" v-ripple clickable>
                    <QItemSection avatar>
                        <QIcon name="send" />
                    </QItemSection>
                    <QItemSection>{{ t('sendPickupOrder') }}</QItemSection>
                </QItem>
            </QList>
        </QMenu>
    </QItem>
    <QSeparator />
    <QItem @click="confirmRemove()" v-ripple clickable data-cy="deleteClaim">
        <QItemSection avatar>
            <QIcon name="delete" />
        </QItemSection>
        <QItemSection>{{ t('deleteClaim') }}</QItemSection>
    </QItem>
</template>

<i18n>
{
    "en": {
        "pickupOrder": "Pickup order",
        "openPickupOrder": "Open pickup order",
        "sendPickupOrder": "Send pickup order",
        "deleteClaim": "Delete claim",
        "confirmDeletion": "Confirm deletion",
        "confirmDeletionMessage": "Are you sure you want to delete this claim?"
    },
    "es": {
        "pickupOrder": "Orden de recogida",
        "openPickupOrder": "Abrir orden de recogida",
        "sendPickupOrder": "Enviar orden de recogida",
        "deleteClaim": "Eliminar reclamación",
        "confirmDeletion": "Confirmar eliminación",
        "confirmDeletionMessage": "Seguro que quieres eliminar esta reclamación?"
    }
}
</i18n>
