<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();
async function onFetch(rows) {
    amount.value = 0;
    amountClaimed.value = 0;
    if (!rows || !rows.length) return;

    amount.value = rows.reduce(
        (accumulator, { sale }) => accumulator + sale.price * sale.quantity,
        0
    );

    amountClaimed.value = rows.reduce(
        (accumulator, line) => accumulator + line.sale.price * line.quantity,
        0
    );
}

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,
    },
    {
        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 }) => {
            const amount = sale.price * sale.quantity;
            const appliedDiscount = (sale.discount * amount) / 100;

            return amount - appliedDiscount;
        },
        format: (value) => toCurrency(value),
        sortable: true,
    },
]);

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

async function updateQuantity({ id, quantity }) {
    if (!id) return;
    await axios.patch(`ClaimBeginnings/${id}`, { quantity });
}

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

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

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());
}
</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">
                    {{ 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="column items-center">
        <div class="list">
            <CrudModel
                data-key="ClaimLines"
                ref="claimLinesForm"
                :url="`Claims/${route.params.id}/lines`"
                save-url="ClaimBeginnings/crud"
                :filter="linesFilter"
                @on-fetch="onFetch"
                @save-changes="onFetch"
                v-model:selected="selected"
                :default-save="false"
                :default-reset="false"
                auto-load
            >
                <template #body="{ rows }">
                    <QTable
                        :columns="columns"
                        :rows="rows"
                        :dense="$q.screen.lt.md"
                        :pagination="{ rowsPerPage: 0 }"
                        row-key="id"
                        selection="multiple"
                        v-model:selected="selected"
                        hide-pagination
                        :grid="$q.screen.lt.md"
                    >
                        <template #body-cell-claimed="{ row, value }">
                            <QTd auto-width align="right" class="text-primary">
                                <span>{{ value }}</span>

                                <QPopupEdit
                                    v-model="row.quantity"
                                    v-slot="scope"
                                    :title="t('Claimed quantity')"
                                    @update:model-value="updateQuantity(row)"
                                    buttons
                                >
                                    <QInput
                                        v-model="scope.value"
                                        type="number"
                                        dense
                                        autofocus
                                        @keyup.enter="scope.set"
                                        @focus="($event) => $event.target.select()"
                                    />
                                </QPopupEdit>
                            </QTd>
                        </template>
                        <template #body-cell-description="{ row, value }">
                            <QTd auto-width align="right" class="text-primary">
                                {{ value }}
                                <ItemDescriptorProxy
                                    :id="row.sale.itemFk"
                                ></ItemDescriptorProxy>
                            </QTd>
                        </template>
                        <template #body-cell-discount="{ row, value, rowIndex }">
                            <QTd auto-width align="right" class="text-primary">
                                {{ 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">
                                                        {{ column.value }}
                                                        <QPopupEdit
                                                            v-model="props.row.quantity"
                                                            v-slot="scope"
                                                            :title="t('Claimed quantity')"
                                                            @update:model-value="
                                                                updateQuantity(props.row)
                                                            "
                                                            buttons
                                                        >
                                                            <QInput
                                                                v-model="scope.value"
                                                                type="number"
                                                                dense
                                                                autofocus
                                                                @keyup.enter="scope.set"
                                                                @focus="
                                                                    ($event) =>
                                                                        $event.target.select()
                                                                "
                                                            />
                                                        </QPopupEdit>
                                                    </QItemLabel>
                                                </template>
                                                <template
                                                    v-else-if="column.name === 'discount'"
                                                >
                                                    <QItemLabel class="text-primary">
                                                        {{ 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>
            </CrudModel>
        </div>
    </div>

    <QPageSticky position="bottom-right" :offset="[25, 25]">
        <QBtn fab color="primary" 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
    You are about to remove {count} rows: '
        Vas a eliminar <strong>{count}</strong> línea |
        Vas a eliminar <strong>{count}</strong> líneas'
</i18n>
