<script setup>
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';

import VnInput from 'src/components/common/VnInput.vue';
import TicketTransferForm from './TicketTransferForm.vue';

import { toDateFormat } from 'src/filters/date.js';

const $props = defineProps({
    mana: {
        type: Number,
        default: null,
    },
    newPrice: {
        type: Number,
        default: 0,
    },
    transfer: {
        type: Object,
        default: () => {},
    },
    ticket: {
        type: Object,
        default: () => {},
    },
});

const { t } = useI18n();
const QPopupProxyRef = ref(null);
const transferFormRef = ref(null);
const _transfer = ref();

const transferLinesColumns = computed(() => [
    {
        label: t('ticketSale.id'),
        name: 'itemFk',
        field: 'itemFk',
        align: 'left',
    },
    {
        label: t('ticketSale.item'),
        name: 'item',
        field: 'concept',
        align: 'left',
    },
    {
        label: t('ticketSale.quantity'),
        name: 'quantity',
        field: 'quantity',
        align: 'left',
    },
]);

const destinationTicketColumns = computed(() => [
    {
        label: t('ticketSale.id'),
        name: 'id',
        field: 'id',
        align: 'left',
    },
    {
        label: t('ticketSale.shipped'),
        name: 'item',
        field: 'shipped',
        align: 'left',
        format: (val) => toDateFormat(val),
    },
    {
        label: t('ticketSale.agency'),
        name: 'agency',
        field: 'agencyName',
        align: 'left',
    },
    {
        label: t('ticketSale.address'),
        name: 'address',
        field: 'address',
        align: 'left',
    },
]);

const handleRowClick = (row) => {
    const ticketId = row.id;
    if (transferFormRef.value) {
        transferFormRef.value.transferSales(ticketId);
    }
};

onMounted(() => (_transfer.value = $props.transfer));
</script>

<template>
    <QPopupProxy ref="QPopupProxyRef">
        <QCard class="q-px-md" style="display: flex; width: 80vw">
            <QTable
                :rows="transfer.sales"
                :columns="transferLinesColumns"
                :title="t('Sales to transfer')"
                row-key="id"
                :pagination="{ rowsPerPage: 0 }"
                class="full-width q-mt-md"
                :no-data-label="t('globals.noResults')"
            >
                <template #body-cell-quantity="{ row }">
                    <QTd @click.stop>
                        <VnInput
                            v-model.number="row.quantity"
                            :clearable="false"
                            style="max-width: 60px"
                        />
                    </QTd>
                </template>
            </QTable>
            <QSeparator vertical spaced />
            <QTable
                v-if="transfer.lastActiveTickets"
                :rows="transfer.lastActiveTickets"
                :columns="destinationTicketColumns"
                :title="t('Destination ticket')"
                row-key="id"
                class="full-width q-mt-md"
                @row-click="(_, row) => handleRowClick(row)"
            >
                <template #body-cell-address="{ row }">
                    <QTd @click.stop>
                        <span>
                            {{ row.nickname }}
                            {{ row.name }}
                            {{ row.street }}
                            {{ row.postalCode }}
                            {{ row.city }}
                        </span>
                        <QTooltip>
                            {{ row.nickname }}
                            {{ row.name }}
                            {{ row.street }}
                            {{ row.postalCode }}
                            {{ row.city }}
                        </QTooltip>
                    </QTd>
                </template>

                <template #no-data>
                    <TicketTransferForm ref="transferFormRef" v-bind="$props" />
                </template>
                <template #bottom>
                    <TicketTransferForm ref="transferFormRef" v-bind="$props" />
                </template>
            </QTable>
        </QCard>
    </QPopupProxy>
</template>

<i18n>
es:
    Sales to transfer: Líneas a transferir
    Destination ticket: Ticket destinatario
    Transfer to ticket: Transferir a ticket
    New ticket: Nuevo ticket
</i18n>
