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

import axios from 'axios';
import { useQuasar } from 'quasar';

import useNotify from 'src/composables/useNotify';

import VnSmsDialog from 'src/components/common/VnSmsDialog.vue';
import TicketCreateDialog from 'src/pages/Ticket/TicketCreateDialog.vue';
import OrderCreateDialog from 'src/pages/Order/Card/OrderCreateDialog.vue';
import { ref } from 'vue';

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

const { notify } = useNotify();
const { t } = useI18n();
const quasar = useQuasar();
const route = useRoute();

const showSmsDialog = () => {
    quasar.dialog({
        component: VnSmsDialog,
        componentProps: {
            phone: $props.customer.phone || $props.customer.mobile,
            promise: sendSms,
        },
    });
};

const sendSms = async (payload) => {
    payload.destinationFk = route.params.id;
    try {
        await axios.post(`Clients/${route.params.id}/sendSms`, payload);
        notify('globals.notificationSent', 'positive');
    } catch (error) {
        notify(error.message, 'positive');
    }
};

const ticketCreateFormDialog = ref(null);
const openTicketCreateForm = () => {
    ticketCreateFormDialog.value.show();
};
const orderCreateFormDialog = ref(null);
const openOrderCreateForm = () => {
    orderCreateFormDialog.value.show();
};
</script>

<template>
    <QItem v-ripple clickable @click="openTicketCreateForm()">
        <QItemSection>
            {{ t('globals.pageTitles.createTicket') }}
            <QDialog ref="ticketCreateFormDialog">
                <TicketCreateDialog />
            </QDialog>
        </QItemSection>
    </QItem>
    <QItem v-ripple clickable @click="openOrderCreateForm()">
        <QItemSection>
            {{ t('globals.pageTitles.createOrder') }}
            <QDialog ref="orderCreateFormDialog">
                <OrderCreateDialog :client-fk="customer.id" />
            </QDialog>
        </QItemSection>
    </QItem>
    <QItem v-ripple clickable>
        <QItemSection @click="showSmsDialog()">{{ t('Send SMS') }}</QItemSection>
    </QItem>
</template>

<i18n>
es:
    Simple ticket: Ticket simple
    Send SMS: Enviar SMS
</i18n>
