<script setup>
import axios from 'axios';
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { toDate, toCurrency } from 'filters/index';

import VnTable from 'src/components/VnTable/VnTable.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';
import CustomerDescriptorProxy from '../Card/CustomerDescriptorProxy.vue';
import CustomerPaymentsFilter from './CustomerPaymentsFilter.vue';
import RightMenu from 'src/components/common/RightMenu.vue';

const quasar = useQuasar();
const { t } = useI18n();

async function confirm(transaction) {
    quasar
        .dialog({
            component: VnConfirm,
            componentProps: {
                data: transaction,
                title: t('Confirm transaction'),
                promise: confirmTransaction,
            },
        })
        .onOk((row) => (row.isConfirmed = true));
}

async function confirmTransaction({ id }) {
    await axios.post('Clients/confirmTransaction', { id });
    quasar.notify({
        message: t('Payment confirmed'),
        type: 'positive',
    });
}

const columns = computed(() => [
    {
        name: 'id',
        label: t('Transaction ID'),
        isTitle: true,
        align: 'left',
        columnFilter: {
            inWhere: true,
            alias: 't',
        },
        columnClass: 'shrink',
    },
    {
        align: 'left',
        name: 'clientFk',
        label: t('Customer'),
        columnFilter: {
            component: 'select',
            attrs: {
                url: 'Clients',
                fields: ['id', 'name'],
            },
        },
        columnClass: 'expand',
        cardVisible: true,
    },
    {
        name: 'isConfirmed',
        label: t('State'),
        align: 'left',
        format: ({ isConfirmed }) => (isConfirmed ? t('Confirmed') : t('Unconfirmed')),
        chip: {
            condition: () => true,
            color: ({ isConfirmed }) => (isConfirmed ? 'bg-positive' : 'bg-primary'),
        },
        visible: false,
    },
    {
        name: 'created',
        label: t('Dated'),
        format: ({ created }) => toDate(created),
        columnFilter: false,
        cardVisible: true,
    },
    {
        name: 'amount',
        label: t('Amount'),
        format: ({ amount }) => toCurrency(amount),
        columnFilter: {
            component: 'number',
        },
        cardVisible: true,
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('Confirm transaction'),
                icon: 'check',
                action: (row) => confirm(row),
                show: ({ isConfirmed }) => !isConfirmed,
                isPrimary: true,
            },
        ],
    },
]);
</script>

<template>
    <RightMenu>
        <template #right-panel>
            <CustomerPaymentsFilter data-key="CustomerTransactions" />
        </template>
    </RightMenu>
    <VnTable
        data-key="CustomerTransactions"
        url="Clients/transactions"
        order="created DESC"
        :columns="columns"
        :right-search="false"
        auto-load
    >
        <template #column-clientFk="{ row }">
            <span class="link">
                {{ row.clientFk }} -
                {{ row.customerName }}
                <CustomerDescriptorProxy :id="row.clientFk" />
            </span>
        </template>
    </VnTable>
</template>

<style lang="scss">
.customer-payments {
    .q-table--dense .q-table th:first-child {
        padding-left: 0;
    }
    td {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>

<i18n>
es:
    Web Payments: Pagos Web
    Confirm transaction: Confirmar transacción
    Transaction ID: ID transacción
    Customer: cliente
    State: Estado
    Dated: Fecha
    Amount: Importe
    Confirmed: Confirmada
    Unconfirmed: Sin confirmar
    Payment confirmed: Pago confirmado
</i18n>
