<script setup>
import { computed } from 'vue';
import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';

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

import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';
import { useAcl } from 'src/composables/useAcl';

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

const { t } = useI18n();
const router = useRouter();
const quasar = useQuasar();
const { notify } = useNotify();

const redirectToCreateView = (queryParams) => {
    router.push({ name: 'TravelCreate', query: { travelData: queryParams } });
};

const cloneTravel = () => {
    const stringifiedTravelData = JSON.stringify($props.travel);
    redirectToCreateView(stringifiedTravelData);
};

const cloneTravelWithEntries = async () => {
    try {
        const { data } = await axios.post(`Travels/${$props.travel.id}/cloneWithEntries`);
        notify('globals.dataSaved', 'positive');
        router.push({ name: 'TravelBasicData', params: { id: data.id } });
    } catch (err) {
        console.error('Error cloning travel with entries');
    }
};

const canDelete = computed(() => useAcl().hasAny('Travel','*','WRITE'));

const openDeleteEntryDialog = (id) => {
    quasar
        .dialog({
            component: VnConfirm,
            componentProps: {
                title: t('The travel will be deleted'),
                message: t('Do you want to delete this travel?'),
            },
        })
        .onOk(async () => {
            await deleteTravel(id);
        });
};

const deleteTravel = async (id) => {
    try {
        await axios.delete(`Travels/${id}`);
        router.push({ name: 'TravelList' });
        notify('globals.dataDeleted', 'positive');
    } catch (err) {
        console.error('Error deleting travel');
    }
};
</script>

<template>
    <QItem v-ripple clickable @click="cloneTravel(travel)">
        <QItemSection>{{ t('travel.summary.cloneShipping') }}</QItemSection>
    </QItem>
    <QItem v-ripple clickable @click="cloneTravelWithEntries()">
        <QItemSection>
            {{ t('travel.summary.CloneTravelAndEntries') }}
        </QItemSection>
    </QItem>
    <QItem
        v-if="canDelete && travel.totalEntries === 0"
        v-ripple
        clickable
        @click="openDeleteEntryDialog(travel.id)"
    >
        <QItemSection>
            {{ t('travel.summary.deleteTravel') }}
        </QItemSection>
    </QItem>
    <QItem v-ripple clickable>
        <QItemSection>
            <RouterLink
                :to="{ name: 'EntryCreate', query: { travelFk: travel.id } }"
                class="color-vn-text"
            >
                {{ t('travel.summary.AddEntry') }}
            </RouterLink>
        </QItemSection>
    </QItem>
</template>

<i18n>
es:
    The travel will be deleted: El envío será eliminado
    Do you want to delete this travel?: ¿Quieres eliminar este envío?
</i18n>
