<script setup>
import { onMounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { toCurrency, toDate } from 'src/filters';
import { useArrayData } from 'src/composables/useArrayData';
import { getUrl } from 'src/composables/getUrl';
import CardSummary from 'components/ui/CardSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
import InvoiceIntoBook from '../InvoiceInToBook.vue';
import VnTitle from 'src/components/common/VnTitle.vue';
import InvoiceInDescriptorMenu from './InvoiceInDescriptorMenu.vue';
import VehicleDescriptorProxy from 'src/pages/Route/Vehicle/Card/VehicleDescriptorProxy.vue';
import { getTotal } from 'src/composables/getTotal';

const props = defineProps({ id: { type: [Number, String], default: 0 } });
const { t } = useI18n();
const route = useRoute();
const arrayData = useArrayData();

const entityId = computed(() => props.id || +route.params.id);
const invoiceIn = computed(() => arrayData.store.data);
const currency = computed(() => invoiceIn.value?.currency?.code);
const invoiceInUrl = ref();
const amountsNotMatch = ref(null);
const intrastatTotals = ref({ amount: 0, net: 0, stems: 0 });

const vatColumns = ref([
    {
        name: 'expense',
        label: 'invoiceIn.summary.expense',
        field: (row) => row.expenseFk,
        sortable: true,
        align: 'left',
    },
    {
        name: 'landed',
        label: 'invoiceIn.summary.taxableBase',
        field: (row) => row.taxableBase,
        format: (value) => toCurrency(value),
        sortable: true,
        align: 'left',
    },
    {
        name: 'isDeductible',
        label: 'invoiceIn.isDeductible',
        field: (row) => row.isDeductible,
        sortable: true,
        align: 'center',
    },
    {
        name: 'vat',
        label: 'invoiceIn.summary.sageVat',
        field: (row) => {
            if (row.taxTypeSage) return `#${row.taxTypeSage.id} : ${row.taxTypeSage.vat}`;
        },
        format: (value) => value,
        sortable: true,
        align: 'left',
    },
    {
        name: 'transaction',
        label: 'invoiceIn.summary.sageTransaction',
        field: (row) => {
            if (row.transactionTypeSage)
                return `#${row.transactionTypeSage.id} : ${row.transactionTypeSage?.transaction}`;
        },
        format: (value) => value,
        sortable: true,
        align: 'left',
    },
    {
        name: 'rate',
        label: 'invoiceIn.summary.rate',
        field: (row) => taxRate(row.taxableBase, row.taxTypeSage?.rate),
        format: (value) => toCurrency(value),
        sortable: true,
        align: 'left',
    },
    {
        name: 'currency',
        label: 'invoiceIn.summary.currency',
        field: (row) => row.foreignValue,
        format: (val) => val && toCurrency(val, currency.value),
        sortable: true,
        align: 'left',
    },
]);

const dueDayColumns = ref([
    {
        name: 'date',
        label: 'invoiceIn.summary.dueDay',
        field: (row) => toDate(row.dueDated),
        sortable: true,
        align: 'left',
    },
    {
        name: 'bank',
        label: 'invoiceIn.summary.bank',
        field: (row) => row.bank.bank,
        sortable: true,
        align: 'left',
    },
    {
        name: 'amount',
        label: 'invoiceIn.list.amount',
        field: (row) => row.amount,
        format: (value) => toCurrency(value),
        sortable: true,
        align: 'left',
    },
    {
        name: 'landed',
        label: 'invoiceIn.summary.foreignValue',
        field: (row) => row.foreignValue,
        format: (val) => val && toCurrency(val, currency.value),
        sortable: true,
        align: 'left',
    },
]);

const intrastatColumns = ref([
    {
        name: 'code',
        label: 'invoiceIn.summary.code',
        field: (row) => {
            return `${row.intrastat.id}: ${row.intrastat?.description}`;
        },
        sortable: true,
        align: 'left',
    },
    {
        name: 'amount',
        label: 'invoiceIn.list.amount',
        field: (row) => toCurrency(row.amount),
        sortable: true,
        align: 'left',
    },
    {
        name: 'net',
        label: 'invoiceIn.summary.net',
        field: (row) => row.net,
        sortable: true,
        align: 'left',
    },
    {
        name: 'stems',
        label: 'invoiceIn.summary.stems',
        field: (row) => row.stems,
        format: (value) => value,
        sortable: true,
        align: 'left',
    },
    {
        name: 'landed',
        label: 'invoiceIn.summary.country',
        field: (row) => row.country?.code,
        format: (value) => value,
        sortable: true,
        align: 'left',
    },
]);

const vehicleColumns = ref([
    {
        name: 'numberPlate',
        label: 'globals.vehicle',
        field: (row) => row.vehicleInvoiceIn?.numberPlate,
        format: (value) => value,
        align: 'left',
    },
    {
        name: 'amount',
        label: 'invoiceIn.list.amount',
        field: (row) => toCurrency(row.vehicleInvoiceIn?.amount),
        align: 'left',
    },
]);

onMounted(async () => {
    invoiceInUrl.value = `${await getUrl('')}invoiceIn/${entityId.value}/`;
});

const init = (data) => {
    if (!data) return;

    const { totals, invoiceInIntrastat } = data;
    amountsNotMatch.value =
        totals.totalDueDay != totals.totalTaxableBase &&
        totals.totalDueDay != totals.totalVat;

    invoiceInIntrastat.forEach((val) => {
        intrastatTotals.value.amount += val.amount;
        intrastatTotals.value.net += val.net;
        intrastatTotals.value.stems += val.stems;
    });
};

const taxRate = (taxableBase = 0, rate = 0) => (rate / 100) * taxableBase;

const getTotalTax = (tax) =>
    tax.reduce((acc, cur) => acc + taxRate(cur.taxableBase, cur.taxTypeSage?.rate), 0);

const getLink = (param) => `#/invoice-in/${entityId.value}/${param}`;
</script>
<template>
    <CardSummary
        data-key="InvoiceInSummary"
        :url="`InvoiceIns/${entityId}/summary`"
        @on-fetch="(data) => init(data)"
        module-name="InvoiceIn"
    >
        <template #header="{ entity }">
            <div>{{ entity.id }} - {{ entity.supplier?.name }}</div>
        </template>
        <template #header-right v-if="!invoiceIn?.isBooked">
            <InvoiceIntoBook>
                <template #content="{ book }">
                    <QBtn
                        :label="t('Book')"
                        color="orange-11"
                        text-color="black"
                        @click="book(entityId)"
                        data-cy="invoiceInSummary_book"
                    />
                </template>
            </InvoiceIntoBook>
        </template>
        <template #menu="{ entity }">
            <InvoiceInDescriptorMenu :invoice="entity" />
        </template>
        <template #body="{ entity }">
            <QCard class="max-width">
                <VnTitle
                    :url="getLink('basic-data')"
                    :text="t('globals.pageTitles.basicData')"
                    data-cy="basicDataTitleLink"
                />
                <div class="vn-card-group">
                    <div class="vn-card-content">
                        <VnLv
                            :label="t('invoiceIn.list.supplier')"
                            :value="entity.supplier?.name"
                        >
                            <template #value>
                                <span class="link" data-cy="invoiceInSummary_supplier">
                                    {{ entity.supplier?.name }}
                                    <SupplierDescriptorProxy :id="entity.supplierFk" />
                                </span>
                            </template>
                        </VnLv>
                        <VnLv
                            :label="t('invoiceIn.supplierRef')"
                            :value="entity.supplierRef"
                        />
                        <VnLv
                            :label="t('invoiceIn.summary.currency')"
                            :value="entity.currency?.code"
                        />
                        <VnLv
                            :label="t('invoiceIn.serial')"
                            :value="`${entity.serial}`"
                        />
                        <VnLv
                            :label="t('globals.country')"
                            :value="entity.supplier?.country?.code"
                        />
                    </div>
                    <div class="vn-card-content">
                        <VnLv
                            :ellipsis-value="false"
                            :label="t('invoiceIn.summary.issued')"
                            :value="toDate(entity.issued)"
                        />
                        <VnLv
                            :label="t('invoiceIn.summary.operated')"
                            :value="toDate(entity.operated)"
                        />
                        <VnLv
                            :label="t('invoiceIn.summary.bookEntried')"
                            :value="toDate(entity.bookEntried)"
                        />
                        <VnLv
                            :label="t('invoiceIn.summary.bookedDate')"
                            :value="toDate(entity.booked)"
                        />
                        <VnLv
                            :label="t('globals.isVies')"
                            :value="entity.supplier?.isVies"
                        />
                    </div>
                    <div class="vn-card-content">
                        <VnLv
                            :label="t('invoiceIn.summary.sage')"
                            :value="entity.sageWithholding?.withholding"
                        />
                        <VnLv
                            :label="t('invoiceIn.summary.vat')"
                            :value="entity.expenseDeductible?.name"
                        />
                        <VnLv
                            :label="t('globals.company')"
                            :value="entity.company?.code"
                        />
                        <VnLv
                            :label="t('invoiceIn.isBooked')"
                            :value="invoiceIn?.isBooked"
                        />
                    </div>
                    <div class="vn-card-content">
                        <VnLv
                            :label="t('invoiceIn.summary.taxableBase')"
                            :value="toCurrency(entity.totals.totalTaxableBase)"
                        />
                        <VnLv label="Total" :value="toCurrency(entity.totals.totalVat)" />
                        <VnLv :label="t('invoiceIn.summary.dueTotal')">
                            <template #value>
                                <QChip
                                    dense
                                    class="q-pa-xs"
                                    :color="amountsNotMatch ? 'negative' : 'transparent'"
                                    :title="
                                        amountsNotMatch
                                            ? t('invoiceIn.noMatch', {
                                                  totalTaxableBase:
                                                      entity.totals.totalTaxableBase,
                                              })
                                            : t('invoiceIn.summary.dueTotal')
                                    "
                                >
                                    {{ toCurrency(entity.totals.totalDueDay) }}
                                </QChip>
                            </template>
                        </VnLv>
                    </div>
                </div>
            </QCard>
            <!--Vat-->
            <QCard v-if="entity.invoiceInTax.length" class="col-extend">
                <VnTitle
                    :url="getLink('vat')"
                    :text="t('globals.pageTitles.vat')"
                    data-cy="vatTitleLink"
                />
                <QTable
                    :columns="vatColumns"
                    :rows="entity.invoiceInTax"
                    flat
                    hide-pagination
                >
                    <template #header="vatProps">
                        <QTr :props="vatProps" class="bg">
                            <QTh
                                v-for="col in vatProps.cols"
                                :key="col.name"
                                :props="vatProps"
                            >
                                {{ t(col.label) }}
                            </QTh>
                        </QTr>
                    </template>
                    <template #body-cell-isDeductible="{ row }">
                        <QTd align="center">
                            <QCheckbox
                                v-model="row.isDeductible"
                                disable
                                data-cy="isDeductible_checkbox"
                            />
                        </QTd>
                    </template>
                    <template #body-cell-vat="{ value: vatCell }">
                        <QTd :title="vatCell" shrink>
                            {{ vatCell }}
                        </QTd>
                    </template>
                    <template #body-cell-transaction="{ value: transactionCell }">
                        <QTd :title="transactionCell" shrink>
                            {{ transactionCell }}
                        </QTd>
                    </template>
                    <template #bottom-row>
                        <QTr class="bg">
                            <QTd></QTd>
                            <QTd>{{ toCurrency(entity.totals.totalTaxableBase) }}</QTd>
                            <QTd></QTd>
                            <QTd></QTd>
                            <QTd></QTd>
                            <QTd>{{ toCurrency(getTotalTax(entity.invoiceInTax)) }}</QTd>
                            <QTd>{{
                                entity.totals.totalTaxableBaseForeignValue &&
                                toCurrency(
                                    entity.totals.totalTaxableBaseForeignValue,
                                    currency,
                                )
                            }}</QTd>
                            <QTd></QTd>
                        </QTr>
                    </template>
                </QTable>
            </QCard>
            <!--Due Day-->
            <QCard v-if="entity.invoiceInDueDay.length" class="col-shrink">
                <VnTitle
                    :url="getLink('due-day')"
                    :text="t('globals.pageTitles.dueDay')"
                    data-cy="dueDayTitleLink"
                />
                <QTable :columns="dueDayColumns" :rows="entity.invoiceInDueDay" flat>
                    <template #header="dueDayProps">
                        <QTr :props="dueDayProps" class="bg">
                            <QTh
                                table-header-style="max-width:50%"
                                v-for="col in dueDayProps.cols"
                                :key="col.name"
                                :props="dueDayProps"
                            >
                                {{ t(col.label) }}
                            </QTh>
                        </QTr>
                    </template>
                    <template #bottom-row>
                        <QTr class="bg">
                            <QTd></QTd>
                            <QTd></QTd>
                            <QTd>
                                {{ toCurrency(entity.totals.totalDueDay) }}
                            </QTd>
                            <QTd>
                                {{
                                    entity.totals.totalDueDayForeignValue &&
                                    toCurrency(
                                        entity.totals.totalDueDayForeignValue,
                                        currency,
                                    )
                                }}
                            </QTd>
                        </QTr>
                    </template>
                </QTable>
            </QCard>
            <!--Intrastat-->
            <QCard v-if="entity.invoiceInIntrastat.length" class="col-extend">
                <VnTitle
                    :url="getLink('intrastat')"
                    :text="t('globals.pageTitles.intrastat')"
                    data-cy="intrastatTitleLink"
                />
                <QTable
                    :columns="intrastatColumns"
                    :rows="entity.invoiceInIntrastat"
                    flat
                >
                    <template #header="intrastatProps">
                        <QTr :props="intrastatProps" class="bg">
                            <QTh
                                v-for="col in intrastatProps.cols"
                                :key="col.name"
                                :props="intrastatProps"
                            >
                                {{ t(col.label) }}
                            </QTh>
                        </QTr>
                    </template>
                    <template #body-cell-code="{ value: codeCell }">
                        <QTd :title="codeCell" shrink>
                            {{ codeCell }}
                        </QTd>
                    </template>
                    <template #bottom-row>
                        <QTr class="bg">
                            <QTd></QTd>
                            <QTd>{{ toCurrency(intrastatTotals.amount) }}</QTd>
                            <QTd>{{ intrastatTotals.net }}</QTd>
                            <QTd>{{ intrastatTotals.stems }}</QTd>
                            <QTd></QTd>
                        </QTr>
                    </template>
                </QTable>
            </QCard>
            <!-- Vehicle -->
            <QCard v-if="entity?.vehicleInvoiceIn?.length" class="col-shrink">
                <VnTitle
                    :url="getLink('vehicle')"
                    :text="t('globals.vehicle')"
                    data-cy="vehicleTitleLink"
                />
                <QTable :columns="vehicleColumns" :rows="entity.vehicleInvoiceIn" flat>
                    <template #header="vehicleProps">
                        <QTr :props="vehicleProps" class="bg">
                            <QTh
                                v-for="col in vehicleProps.cols"
                                :key="col.name"
                                :props="vehicleProps"
                            >
                                {{ t(col.label) }}
                            </QTh>
                        </QTr>
                    </template>
                    <template #body="vehicleProps">
                        <QTr :props="vehicleProps">
                            <QTd>
                                <span class="link" data-cy="invoiceInSummary_vehicle">
                                    {{ vehicleProps.row.vehicle.numberPlate }}
                                    <VehicleDescriptorProxy
                                        :id="vehicleProps.row.vehicleFk"
                                    /> </span
                            ></QTd>
                            <QTd align="left">{{
                                toCurrency(vehicleProps.row.amount)
                            }}</QTd>
                        </QTr>
                    </template>
                    <template #bottom-row>
                        <QTr class="bg">
                            <QTd></QTd>
                            <QTd>
                                {{
                                    toCurrency(
                                        getTotal(entity.vehicleInvoiceIn, 'amount'),
                                    )
                                }}
                            </QTd>
                        </QTr>
                    </template>
                </QTable>
            </QCard>
        </template>
    </CardSummary>
</template>
<style lang="scss" scoped>
.bg {
    background-color: var(--vn-accent-color);
}
.q-chip {
    color: var(--vn-text-color);
}

@media (min-width: $breakpoint-md) {
    .summaryBody {
        .col-extend {
            flex: 65%;
        }

        .col-shrink {
            flex: 30%;
        }
        .col-extend,
        .col-shrink {
            .q-table th {
                padding-right: 0;
            }
        }
    }
}
</style>
<i18n>
    es:
        Search invoice: Buscar factura recibida
        You can search by invoice reference: Puedes buscar por referencia de la factura
        Totals: Totales
        Book: Contabilizar
</i18n>
