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

import axios from 'axios';
import { QCheckbox, QBtn, useQuasar } from 'quasar';

import { toCurrency, toDate, toDateHourMin } from 'src/filters';
import { useState } from 'src/composables/useState';
import { useStateStore } from 'stores/useStateStore';
import { useValidator } from 'src/composables/useValidator';
import { usePrintService } from 'src/composables/usePrintService';

import VnPaginate from 'src/components/ui/VnPaginate.vue';
import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';

const { sendEmail } = usePrintService();
const { t } = useI18n();
const { validate } = useValidator();
const quasar = useQuasar();
const route = useRoute();
const state = useState();
const stateStore = useStateStore();
const user = state.getUser();

const clientRisks = ref(null);
const clientRisksRef = ref(null);
const companiesOptions = ref([]);
const companyId = ref(null);
const receiptsRef = ref(null);
const receiptsData = ref([]);

const filterCompanies = { order: ['code'] };
const userParams = {
    clientId: route.params.id,
    companyId: user.value.companyFk,
};
const filter = {
    include: { relation: 'company', scope: { fields: ['code'] } },
    where: { clientFk: route.params.id, companyFk: user.value.companyFk },
};

const columns = computed(() => [
    {
        align: 'left',
        field: 'payed',
        format: (value) => toDate(value),
        label: t('Date'),
        name: 'date',
    },
    {
        align: 'left',
        field: 'created',
        format: (value) => toDateHourMin(value),
        label: t('Creation date'),
        name: 'creationDate',
    },
    {
        align: 'left',
        field: 'userName',
        label: t('Employee'),
        name: 'employee',
    },
    {
        align: 'left',
        field: 'description',
        label: t('Reference'),
        name: 'reference',
    },
    {
        align: 'left',
        field: 'bankFk',
        label: t('Bank'),
        name: 'bank',
    },
    {
        align: 'right',
        field: 'debit',
        format: (value) => value && toCurrency(value),
        label: t('Debit'),
        name: 'debit',
    },
    {
        align: 'right',
        field: 'credit',
        format: (value) => value && toCurrency(value),
        label: t('Havings'),
        name: 'havings',
    },
    {
        align: 'right',
        field: 'balance',
        format: (value) => value && toCurrency(value),
        label: t('Balance'),
        name: 'balance',
    },
    {
        align: 'left',
        field: 'isConciliate',
        label: t('Conciliated'),
        name: 'conciliated',
    },
    {
        align: 'left',
        field: 'totalWithVat',
        label: '',
        name: 'actions',
    },
]);

onBeforeMount(() => {
    stateStore.rightDrawer = true;
    companyId.value = user.value.companyFk;
});

watch(
    () => route.params.id,
    (newValue) => {
        if (!newValue) return;
        userParams.clientId = newValue;
        filter.where.clientFk = newValue;
        getData();
    }
);

const getData = () => {
    receiptsRef.value?.fetch();
    clientRisksRef.value?.fetch();
};

const getCurrentBalance = () => {
    const currentBalance = clientRisks.value.find((balance) => {
        return balance.companyFk === companyId.value;
    });
    return currentBalance && currentBalance.amount;
};

const onFetch = (balances) => {
    balances.forEach((balance, index) => {
        if (index === 0) {
            balance.balance = getCurrentBalance();
        } else {
            let previousBalance = balances[index - 1];
            balance.balance =
                previousBalance.balance -
                (previousBalance.debit - previousBalance.credit);
        }
    });

    receiptsData.value = balances;
};

const showNewPaymentDialog = () => {
    quasar.dialog({
        component: CustomerNewPayment,
        componentProps: {
            companyId: companyId.value,
            totalCredit: clientRisks.value[0]?.amount,
            promise: getData,
        },
    });
};

const updateCompanyId = (id) => {
    if (id) {
        companyId.value = id;
        userParams.companyId = id;
        filter.where.companyFk = id;
    }
    getData();
};

const saveFieldValue = async (row) => {
    try {
        const payload = { description: row.description };
        await axios.patch(`Receipts/${row.id}`, payload);
    } catch (err) {
        return err;
    }
};

const sendEmailAction = () => {
    sendEmail(`Suppliers/${route.params.id}/campaign-metrics-email`);
};
</script>

<template>
    <FetchData
        :filter="filter"
        @on-fetch="(data) => (clientRisks = data)"
        auto-load
        ref="clientRisksRef"
        url="ClientRisks"
    />
    <FetchData
        :filter="filterCompanies"
        @on-fetch="(data) => (companiesOptions = data)"
        auto-load
        url="Companies"
    />

    <VnPaginate
        auto-load
        data-key="CustomerBalance"
        url="Receipts/filter"
        :user-params="userParams"
        ref="receiptsRef"
        @on-fetch="onFetch"
    >
        <template #body="{ rows }">
            <QTable
                :columns="columns"
                :no-data-label="t('globals.noResults')"
                :rows-per-page-options="[0]"
                :rows="rows"
                class="full-width q-mt-md"
                row-key="id"
            >
                <template #body-cell-employee="{ row }">
                    <QTd auto-width @click.stop>
                        <QBtn color="blue" flat no-caps>{{ row.userName }}</QBtn>
                        <WorkerDescriptorProxy :id="row.clientFk" />
                    </QTd>
                </template>

                <template #body-cell-reference="{ row }">
                    <QTd auto-width @click.stop v-if="row.isInvoice">
                        <QBtn color="blue" dense flat>
                            {{ t('bill', { ref: row.description }) }}
                        </QBtn>
                        <InvoiceOutDescriptorProxy :id="row.id" />
                    </QTd>
                    <QTd v-else>
                        <VnInput
                            @keyup.enter="saveFieldValue(row)"
                            autofocus
                            clearable
                            dense
                            v-model="row.description"
                        />
                    </QTd>
                </template>

                <template #body-cell-conciliated="{ row }">
                    <QTd align="center">
                        <QCheckbox :model-value="row.isConciliate === 1" disable />
                    </QTd>
                </template>

                <template #body-cell-actions="{ row }">
                    <QTd align="center">
                        <QIcon
                            @click.stop="showDialog = true"
                            class="q-ml-md"
                            color="primary"
                            name="outgoing_mail"
                            size="sm"
                            style="font-variation-settings: 'FILL' 1"
                            v-if="row.isCompensation"
                        >
                            <QTooltip>
                                {{ t('Send compensation') }}
                            </QTooltip>
                        </QIcon>

                        <QDialog v-model="showDialog">
                            <QCard class="q-pa-sm">
                                <QCardSection>
                                    <span
                                        ref="closeButton"
                                        class="flex justify-end color-vn-label"
                                        v-close-popup
                                    >
                                        <QIcon name="close" size="sm" />
                                    </span>
                                    <div class="text-h6">
                                        {{ t('Send compensation') }}
                                    </div>
                                </QCardSection>
                                <QCardSection>
                                    <div>
                                        {{
                                            t(
                                                'Do you want to report compensation to the client by mail?'
                                            )
                                        }}
                                    </div>
                                </QCardSection>
                                <QCardActions class="flex justify-end q-mb-sm">
                                    <QBtn
                                        :label="t('globals.cancel')"
                                        color="primary"
                                        flat
                                        v-close-popup
                                    />
                                    <QBtn
                                        :label="t('globals.save')"
                                        @click="sendEmailAction"
                                        class="q-ml-sm"
                                        color="primary"
                                    />
                                </QCardActions>
                            </QCard>
                        </QDialog>
                    </QTd>
                </template>
            </QTable>
        </template>
    </VnPaginate>

    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
        <div class="q-mt-xl q-px-md">
            <VnSelect
                :label="t('Company')"
                :options="companiesOptions"
                @update:model-value="updateCompanyId($event)"
                hide-selected
                option-label="code"
                option-value="id"
                v-model="companyId"
                :rules="validate('entry.companyFk')"
            />
        </div>

        <QCard class="q-ma-md q-pa-md q-mt-lg" v-if="receiptsData?.length">
            <QCardSection>
                <div class="flex justify-center text-subtitle1 text-bold">
                    {{ t('Total by company') }}
                </div>
                <div class="flex justify-center">
                    <div class="q-mr-sm" v-if="clientRisks?.length">
                        {{ clientRisks[0].company.code }}:
                    </div>
                    <div v-if="clientRisks?.length">
                        {{ toCurrency(clientRisks[0].amount) }}
                    </div>
                </div>
            </QCardSection>
        </QCard>
    </QDrawer>

    <QPageSticky :offset="[18, 18]">
        <QBtn @click.stop="showNewPaymentDialog()" color="primary" fab icon="add" />
        <QTooltip>
            {{ t('New payment') }}
        </QTooltip>
    </QPageSticky>
</template>

<i18n>
en:
    bill: 'N/INV {ref}'
es:
    Company: Empresa
    Total by company: Total por empresa
    New payment: Añadir pago
    Date: Fecha
    Creation date: Fecha de creación
    Employee: Empleado
    Reference: Referencia
    bill: 'N/FRA {ref}'
    Bank: Caja
    Debit: Debe
    Havings: Haber
    Balance: Balance
    Conciliated: Conciliado
    Send compensation: Enviar compensación
    Do you want to report compensation to the client by mail?: ¿Desea informar de la compensación al cliente por correo?
</i18n>
