<script setup>
import axios from 'axios';
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useRoute } from 'vue-router';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import { toDate, toCurrency, toPercentage } from 'filters/index';
import CrudModel from 'components/CrudModel.vue';
import FetchData from 'components/FetchData.vue';
import VnDiscount from 'components/common/vnDiscount.vue';
import ClaimLinesImport from './ClaimLinesImport.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';

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

const stateStore = useStateStore();
const arrayData = useArrayData('ClaimLines');
const store = arrayData.store;

const claimFilter = {
    fields: ['ticketFk'],
};
const linesFilter = {
    include: {
        relation: 'sale',
        scope: {
            fields: ['concept', 'ticketFk', 'price', 'quantity', 'discount', 'itemFk'],
            include: {
                relation: 'ticket',
            },
        },
    },
};

const claimLinesForm = ref();
const claim = ref(null);
async function onFetchClaim(data) {
    claim.value = data;
    fetchMana();
}

const amount = ref();
const amountClaimed = ref();
function onFetch(rows, newRows) {
    if (newRows) rows = newRows;
    amount.value = 0;
    amountClaimed.value = 0;
    if (!rows || !rows.length) return;

    for (const row of rows) {
        const { sale } = row;
        amount.value = amount.value + totalRow(sale);
        const price = row.quantity * sale.price;
        const discount = (sale.discount * price) / 100;
        amountClaimed.value = amountClaimed.value + (price - discount);
    }
}

function totalRow({ price, quantity, discount }) {
    const amount = price * quantity;
    const appliedDiscount = (discount * amount) / 100;
    return amount - appliedDiscount;
}

const columns = computed(() => [
    {
        name: 'dated',
        label: t('Delivered'),
        field: ({ sale: { ticket } }) => toDate(ticket.landed),
        sortable: true,
    },
    {
        name: 'quantity',
        label: t('Quantity'),
        field: ({ sale }) => sale.quantity,
        sortable: true,
        style: 'padding-right: 2%;',
        headerStyle: 'padding-right: 2%;'
    },
    {
        name: 'claimed',
        label: t('Claimed'),
        field: (row) => row.quantity,
        sortable: true,
    },
    {
        name: 'description',
        label: t('Description'),
        field: ({ sale }) => sale.concept,
    },
    {
        name: 'price',
        label: t('Price'),
        field: ({ sale }) => sale.price,
        format: (value) => toCurrency(value),
        sortable: true,
    },
    {
        name: 'discount',
        label: t('Discount'),
        field: ({ sale }) => sale.discount,
        format: (value) => toPercentage(value / 100),
        sortable: true,
    },
    {
        name: 'total',
        label: t('Total'),
        field: ({ sale }) => totalRow(sale),
        format: (value) => toCurrency(value),
        sortable: true,
        style: 'padding-right: 2%;',
        headerStyle: 'padding-right: 2%;'
    },
]);

const selected = ref([]);
const mana = ref(0);
async function fetchMana() {
    const ticketId = claim.value.ticketFk;
    const response = await axios.get(`Tickets/${ticketId}/getDepartmentMana`);
    mana.value = response.data;
}

async function updateDiscount({ saleFk, discount, canceller }) {
    const body = { salesIds: [saleFk], newDiscount: discount };
    const ticketFk = claim.value.ticketFk;
    const query = `Tickets/${ticketFk}/updateDiscount`;

    await axios.post(query, body, {
        signal: canceller.signal,
    });
    await claimLinesForm.value.reload();
}

function onUpdateDiscount(response) {
    const row = store.data[response.rowIndex];
    row.sale.discount = response.discount;
    quasar.notify({
        message: t('Discount updated'),
        type: 'positive',
    });
}

function showImportDialog() {
    quasar
        .dialog({
            component: ClaimLinesImport,
            componentProps: {
                ticketId: claim.value.ticketFk,
            },
        })
        .onOk(() => claimLinesForm.value.reload());
}

function fillClaimedQuantities() {
    const formData = claimLinesForm.value.formData;
    let hasChanges = false;

    const selectedRows = formData.filter(row => selected.value.includes(row));

    for (const row of selectedRows) {
        if (row.quantity === 0 || row.quantity === null) {
            row.quantity = row.sale.quantity;
            hasChanges = true;
        }
    }

    if (hasChanges) {
    quasar.notify({
        message: t('Quantities filled automatically'),
        type: 'positive',
    });
    } else {
        quasar.notify({
            message: t('No quantities to fill'),
            type: 'info',
        });
    }
}


</script>
<template>
    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
        <div class="row q-gutter-md">
            <div>
                {{ t('Amount') }}
                <QChip :dense="$q.screen.lt.sm" text-color="white">
                    {{ toCurrency(amount) }}
                </QChip>
            </div>
            <QSeparator dark vertical />
            <div>
                {{ t('Amount Claimed') }}
                <QChip color="positive" :dense="$q.screen.lt.sm">
                    {{ toCurrency(amountClaimed) }}
                </QChip>
            </div>
        </div>
    </Teleport>

    <FetchData
        :url="`Claims/${route.params.id}`"
        :filter="claimFilter"
        @on-fetch="onFetchClaim"
        auto-load
    />
    <div class="q-pa-md">
        
        <CrudModel
            data-key="claimLines"
            ref="claimLinesForm"
            :go-to="`photos`"
            :url="`Claims/${route.params.id}/lines`"
            save-url="ClaimBeginnings/crud"
            :user-filter="linesFilter"
            @on-fetch="onFetch"
            v-model:selected="selected"
            :default-reset="false"
            auto-load
            :limit="0"
        >
            <template #body="{ rows }">
                <QTable
                    :columns="columns"
                    :rows="rows"
                    :dense="$q.screen.lt.md"
                    row-key="id"
                    selection="multiple"
                    v-model:selected="selected"
                    :grid="$q.screen.lt.md"
                >
                    <template #body-cell-claimed="{ row }">
                        <QTd auto-width align="right" class="text-primary shrink">
                            <QInput
                                v-model.number="row.quantity"
                                type="number"
                                dense
                               
                            />
                        </QTd>
                    </template>
                    <template #body-cell-description="{ row, value }">
                        <QTd auto-width align="right" class="link expand">
                            {{ value }}
                            <ItemDescriptorProxy
                                :id="row.sale.itemFk"
                            ></ItemDescriptorProxy>
                        </QTd>
                    </template>
                    <template #body-cell-discount="{ row, value, rowIndex }">
                        <QTd auto-width align="right" class="link shrink">
                            {{ value }}
                            <VnDiscount
                                :quantity="row.quantity"
                                :price="row.sale.price"
                                :discount="row.sale.discount"
                                :mana="mana"
                                :promise="updateDiscount"
                                :data="{ saleFk: row.sale.id, rowIndex: rowIndex }"
                                @on-update="onUpdateDiscount"
                            />
                        </QTd>
                    </template>
                    <!-- View for grid mode -->
                    <template #item="props">
                        <div
                            class="q-mb-md col-12 grid-style-transition"
                            :style="props.selected ? 'transform: scale(0.95);' : ''"
                        >
                            <QCard>
                                <QCardSection>
                                    <QCheckbox v-model="props.selected" />
                                </QCardSection>
                                <QSeparator inset />
                                <QList dense>
                                    <QItem
                                        v-for="column of props.cols"
                                        :key="column.name"
                                    >
                                        <QItemSection>
                                            <QItemLabel caption>
                                                {{ column.label }}
                                            </QItemLabel>
                                        </QItemSection>
                                        <QItemSection side>
                                            <template v-if="column.name === 'claimed'">
                                                <QItemLabel class="text-primary shrink">
                                                    <QInput
                                                        v-model.number="
                                                            props.row.quantity
                                                        "
                                                        type="number"
                                                        dense
                                                        autofocus
                                               
                                                    />
                                                </QItemLabel>
                                            </template>
                                            <template
                                                v-else-if="column.name === 'discount'"
                                            >
                                                <QItemLabel class="text-primary shrink">
                                                    {{ column.value }}
                                                    <VnDiscount
                                                        :quantity="props.row.quantity"
                                                        :price="props.row.sale.price"
                                                        :discount="
                                                            props.row.sale.discount
                                                        "
                                                        :mana="mana"
                                                        :promise="updateDiscount"
                                                        :data="{
                                                            saleFk: props.row.sale.id,
                                                            rowIndex: props.rowIndex,
                                                        }"
                                                        @on-update="onUpdateDiscount"
                                                    />
                                                </QItemLabel>
                                            </template>
                                            <template v-else>
                                                <QItemLabel>
                                                    {{ column.value }}
                                                </QItemLabel>
                                            </template>
                                        </QItemSection>
                                    </QItem>
                                </QList>
                            </QCard>
                        </div>
                    </template>
                </QTable>
            </template>
            <template #moreBeforeActions>
                <QBtn
                    color="primary"
                    text-color="white"
                    :unelevated="true"
                    :label="t('Rellenar cantidades')"
                    :title="t('Rellenar cantidades')"
                    icon="auto_fix_high"
                    :disabled="!selected.length"
                    @click="fillClaimedQuantities"
                />
            </template>
        </CrudModel>
    </div>

    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <QBtn
            fab
            color="primary"
            v-shortcut="'+'"
            icon="add"
            @click="showImportDialog()"
        />
    </QPageSticky>
</template>

<style lang="scss" scoped>
.list {
    padding-top: 50px;
    max-width: 900px;
    width: 100%;
}
.grid-style-transition {
    transition:
        transform 0.28s,
        background-color 0.28s;
}
</style>

<i18n>
en:
    You are about to remove {count} rows: '
        You are about to remove <strong>{count}</strong> row |
        You are about to remove  <strong>{count}</strong> rows'
es:
    Delivered: Entregado
    Quantity: Cantidad
    Claimed: Reclamada
    Description: Descripción
    Price: Precio
    Discount: Descuento
    Actions: Acciones
    Amount: Total
    Amount Claimed: Cantidad reclamada
    Delete claimed sales: Eliminar ventas reclamadas
    Discount updated: Descuento actualizado
    Claimed quantity: Cantidad reclamada
    Quantities filled automatically: Cantidades rellenadas automáticamente
    No quantities to fill: No hay cantidades para rellenar
    You are about to remove {count} rows: '
        Vas a eliminar <strong>{count}</strong> línea |
        Vas a eliminar <strong>{count}</strong> líneas'
</i18n>
