<script setup>
import { onBeforeMount, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import axios from 'axios';

import { useDialogPluginComponent } from 'quasar';

import { usePrintService } from 'composables/usePrintService';
import useNotify from 'src/composables/useNotify.js';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInputDate from 'components/common/VnInputDate.vue';
import VnInputNumber from 'components/common/VnInputNumber.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';

const { t } = useI18n();
const route = useRoute();
const { notify } = useNotify();
const { sendEmail, openReport } = usePrintService();
const { dialogRef } = useDialogPluginComponent();

const $props = defineProps({
    companyId: {
        type: Number,
        required: true,
    },
    totalCredit: {
        type: Number,
        required: true,
    },
    promise: {
        type: Function,
        default: null,
    },
});

const closeButton = ref(null);
const urlCreate = ref([]);
const companyOptions = ref([]);
const bankOptions = ref([]);
const clientFindOne = ref([]);
const viewReceipt = ref();
const shouldSendEmail = ref(false);
const maxAmount = ref();
const accountingType = ref({});
const isCash = ref(false);
const formModelRef = ref(false);

const filterBanks = {
    fields: ['id', 'bank', 'accountingTypeFk'],
    include: { relation: 'accountingType' },
    order: 'id',
    limit: 30,
};

const filterClientFindOne = {
    fields: ['email'],
    where: {
        id: route.params.id,
    },
};

const initialData = reactive({
    amountPaid: $props.totalCredit,
    clientFk: route.params.id,
    companyFk: $props.companyId,
    email: clientFindOne.value.email,
});

onBeforeMount(() => {
    urlCreate.value = `Clients/${route.params.id}/createReceipt`;
});

function setPaymentType(accounting) {
    if (!accounting) return;
    accountingType.value = accounting.accountingType;

    initialData.description = [];
    initialData.payed = Date.vnNew();
    isCash.value = accountingType.value.code == 'cash';
    viewReceipt.value = isCash.value;
    if (accountingType.value.daysInFuture)
        initialData.payed.setDate(
            initialData.payed.getDate() + accountingType.value.daysInFuture
        );
    maxAmount.value = accountingType.value && accountingType.value.maxAmount;

    if (accountingType.value.code == 'compensation')
        return (initialData.description = '');
    if (accountingType.value.receiptDescription)
        initialData.description.push(accountingType.value.receiptDescription);
    if (initialData.description) initialData.description.push(initialData.description);

    initialData.description = initialData.description.join(', ');
}

const calculateFromAmount = (event) => {
    initialData.amountToReturn =
        parseFloat(initialData.deliveredAmount) + parseFloat(event) * -1;
};

const calculateFromDeliveredAmount = (event) => {
    initialData.amountToReturn = parseFloat(event) - initialData.amountPaid;
};

function onBeforeSave(data) {
    const exceededAmount = data.amountPaid > maxAmount.value;
    if (isCash.value && exceededAmount)
        return notify(t('Amount exceeded', { maxAmount: maxAmount.value }), 'negative');

    if (isCash.value && shouldSendEmail.value && !data.email)
        return notify(t('There is no assigned email for this client'), 'negative');

    data.bankFk = data.bankFk.id;
    return data;
}

async function onDataSaved(formData, { id }) {
    try {
        if (shouldSendEmail.value && isCash.value)
            await sendEmail(`Receipts/${id}/receipt-email`, {
                recipient: formData.email,
            });

        if (viewReceipt.value) openReport(`Receipts/${id}/receipt-pdf`);
    } finally {
        if ($props.promise) $props.promise();
        if (closeButton.value) closeButton.value.click();
    }
}

async function accountShortToStandard({ target: { value } }) {
    if (!value) return (initialData.description = '');
    initialData.compensationAccount = value.replace('.', '0'.repeat(11 - value.length));
    const params = { bankAccount: initialData.compensationAccount };
    const { data } = await axios(`Clients/getClientOrSupplierReference`, { params });
    if (!data.clientId) {
        initialData.description = t('Supplier Compensation Reference', {
            supplierId: data.supplierId,
            supplierName: data.supplierName,
        });
        return;
    }
    initialData.description = t('Client Compensation Reference', {
        clientId: data.clientId,
        clientName: data.clientName,
    });
}

async function getAmountPaid() {
    const filter = {
        where: {
            clientFk: route.params.id,
            companyFk: initialData.companyFk,
        },
    };

    const { data } = await axios(`ClientRisks`, {
        params: { filter: JSON.stringify(filter) },
    });
    initialData.amountPaid = (data?.length && data[0].amount) || undefined;
}
</script>

<template>
    <QDialog ref="dialogRef" persistent>
        <FetchData
            @on-fetch="(data) => (companyOptions = data)"
            auto-load
            url="Companies"
        />
        <FetchData
            :filter="filterBanks"
            @on-fetch="(data) => (bankOptions = data)"
            auto-load
            url="Accountings"
        />
        <FetchData
            :filter="filterClientFindOne"
            @on-fetch="({ email }) => (initialData.email = email)"
            auto-load
            url="Clients/findOne"
        />
        <FormModel
            ref="formModelRef"
            :form-initial-data="initialData"
            :observe-form-changes="false"
            :url-create="urlCreate"
            :mapper="onBeforeSave"
            @on-data-saved="onDataSaved"
        >
            <template #form="{ data, validate }">
                <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
                    <QIcon name="close" size="sm" />
                </span>

                <h5 class="q-mt-none">{{ t('New payment') }}</h5>

                <VnRow>
                    <VnInputDate
                        :label="t('Date')"
                        :required="true"
                        v-model="data.payed"
                    />
                    <VnSelect
                        :label="t('Company')"
                        :options="companyOptions"
                        :required="true"
                        :rules="validate('entry.companyFk')"
                        hide-selected
                        option-label="code"
                        option-value="id"
                        v-model="data.companyFk"
                        @update:model-value="getAmountPaid()"
                    />
                </VnRow>
                <VnRow>
                    <VnSelect
                        :label="t('Bank')"
                        v-model="data.bankFk"
                        url="Accountings"
                        option-label="bank"
                        :include="{ relation: 'accountingType' }"
                        sort-by="id"
                        :limit="0"
                        @update:model-value="
                            (value, options) => setPaymentType(value, options)
                        "
                        :emit-value="false"
                    >
                        <template #option="scope">
                            <QItem v-bind="scope.itemProps">
                                <QItemSection>
                                    <QItemLabel>
                                        {{ scope.opt.id }}:&ensp;{{ scope.opt.bank }}
                                    </QItemLabel>
                                </QItemSection>
                            </QItem>
                        </template>
                    </VnSelect>
                    <VnInput
                        :label="t('Amount')"
                        :required="true"
                        @update:model-value="calculateFromAmount($event)"
                        clearable
                        v-model.number="data.amountPaid"
                    />
                </VnRow>
                <div v-if="data.bankFk?.accountingType?.code == 'compensation'">
                    <div class="text-h6">
                        {{ t('Compensation') }}
                    </div>
                    <VnRow>
                        <VnInput
                            :label="t('Compensation account')"
                            clearable
                            v-model="data.compensationAccount"
                            @blur="accountShortToStandard"
                        />
                    </VnRow>
                </div>
                <VnInput
                    :label="t('Reference')"
                    :required="true"
                    clearable
                    v-model="data.description"
                />

                <div v-if="data.bankFk?.accountingType?.code == 'cash'">
                    <div class="text-h6">{{ t('Cash') }}</div>
                    <VnRow>
                        <VnInputNumber
                            :label="t('Delivered amount')"
                            @update:model-value="calculateFromDeliveredAmount($event)"
                            clearable
                            v-model="data.deliveredAmount"
                        />
                        <VnInputNumber
                            :label="t('Amount to return')"
                            disable
                            v-model="data.amountToReturn"
                        />
                    </VnRow>
                    <VnRow>
                        <QCheckbox v-model="viewReceipt" :label="t('View recipt')" />
                        <QCheckbox v-model="shouldSendEmail" :label="t('Send email')" />
                    </VnRow>
                </div>
                <div class="q-mt-lg row justify-end">
                    <QBtn
                        :disabled="formModelRef.isLoading"
                        :label="t('globals.cancel')"
                        :loading="formModelRef.isLoading"
                        class="q-ml-sm"
                        color="primary"
                        flat
                        type="reset"
                        v-close-popup
                    />
                    <QBtn
                        :disabled="formModelRef.isLoading"
                        :label="t('globals.save')"
                        :loading="formModelRef.isLoading"
                        color="primary"
                        type="submit"
                    />
                </div>
            </template>
        </FormModel>
    </QDialog>
</template>

<i18n>
es:
    New payment: Añadir pago
    Date: Fecha
    Company: Empresa
    Bank: Caja
    Amount: Importe
    Reference: Referencia
    Cash: Efectivo
    Delivered amount: Cantidad entregada
    Amount to return: Cantidad a devolver
    View recipt: Ver recibido
    Send email: Enviar correo
    Compensation: Compensación
    Compensation account: Cuenta para compensar
    Supplier Compensation Reference: ({supplierId}) Ntro Proveedor {supplierName}
    Client Compensation Reference: ({clientId}) Ntro Cliente {clientName}
    There is no assigned email for this client: No hay correo asignado para este cliente
    Amount exceeded: Según ley contra el fraude no se puede recibir cobros por importe igual o superior a {maxAmount}
</i18n>
