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

import VnPaginate from 'src/components/ui/VnPaginate.vue';
import FetchData from 'src/components/FetchData.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import VnConfirm from 'components/ui/VnConfirm.vue';

import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore';
import { toCurrency } from 'src/filters';
import axios from 'axios';
import useNotify from 'src/composables/useNotify.js';

const quasar = useQuasar();
const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const stateStore = useStateStore();
const { notify } = useNotify();

const rowsSelected = ref([]);
const entryBuysPaginateRef = ref(null);
const packagingsOptions = ref(null);

const tableColumnComponents = computed(() => ({
    item: {
        component: () => 'span',
        props: () => {},
        event: () => ({}),
    },
    quantity: {
        component: () => VnInput,
        props: (col) => ({
            type: 'number',
            min: 0,
            label: col.label,
            class: 'input-number',
        }),
        event: (props) => ({
            'keyup.enter': () => saveChange(props.row),
        }),
    },
    packagingFk: {
        component: () => VnSelectFilter,
        props: () => ({
            'option-value': 'id',
            'option-label': 'id',
            'emit-value': true,
            'map-options': true,
            'use-input': true,
            'hide-selected': true,
            options: packagingsOptions.value,
        }),
        event: (props) => ({
            'update:modelValue': () => saveChange(props.row),
        }),
    },
    stickers: {
        component: () => VnInput,
        props: (col) => ({
            type: 'number',
            min: 0,
            label: col.label,
            class: 'input-number',
        }),
        event: (props) => ({
            'keyup.enter': () => saveChange(props.row),
        }),
    },
    weight: {
        component: () => VnInput,
        props: (col) => ({
            type: 'number',
            min: 0,
            label: col.label,
        }),
        event: (props) => ({
            'keyup.enter': () => saveChange(props.row),
        }),
    },
    packing: {
        component: () => VnInput,
        props: (col) => ({
            type: 'number',
            min: 0,
            label: col.label,
        }),
        event: (props) => ({
            'keyup.enter': () => saveChange(props.row),
        }),
    },
    grouping: {
        component: () => VnInput,
        props: (col) => ({
            type: 'number',
            min: 0,
            label: col.label,
        }),
        event: (props) => ({
            'keyup.enter': () => saveChange(props.row),
        }),
    },
    buyingValue: {
        component: () => VnInput,
        props: (col) => ({
            type: 'number',
            min: 0,
            label: col.label,
        }),
        event: (props) => ({
            'keyup.enter': () => saveChange(props.row),
        }),
    },
    price2: {
        component: () => VnInput,
        props: (col) => ({
            type: 'number',
            min: 0,
            label: col.label,
        }),
        event: (props) => ({
            'keyup.enter': () => saveChange(props.row),
        }),
    },
    price3: {
        component: () => VnInput,
        props: (col) => ({
            type: 'number',
            min: 0,
            label: col.label,
        }),
        event: (props) => ({
            'keyup.enter': () => saveChange(props.row),
        }),
    },
    import: {
        component: () => 'span',
        props: () => {},
        event: () => ({}),
    },
}));

const entriesTableColumns = computed(() => {
    return [
        {
            label: t('entry.summary.item'),
            field: 'id',
            name: 'item',
            align: 'left',
        },
        {
            label: t('entry.summary.quantity'),
            field: 'quantity',
            name: 'quantity',
            align: 'left',
        },
        {
            label: t('entry.summary.package'),
            field: 'packagingFk',
            name: 'packagingFk',
            align: 'left',
        },
        {
            label: t('entry.summary.stickers'),
            field: 'stickers',
            name: 'stickers',
            align: 'left',
        },
        {
            label: t('entry.summary.weight'),
            field: 'weight',
            name: 'weight',
            align: 'left',
        },
        {
            label: t('entry.summary.packing'),
            field: 'packing',
            name: 'packing',
            align: 'left',
        },
        {
            label: t('entry.summary.grouping'),
            field: 'grouping',
            name: 'grouping',
            align: 'left',
        },
        {
            label: t('entry.summary.buyingValue'),
            field: 'buyingValue',
            name: 'buyingValue',
            align: 'left',
            format: (value) => toCurrency(value),
        },
        {
            label: t('entry.buys.groupingPrice'),
            field: 'price2',
            name: 'price2',
            align: 'left',
        },
        {
            label: t('entry.buys.packingPrice'),
            field: 'price3',
            name: 'price3',
            align: 'left',
        },
        {
            label: t('entry.summary.import'),
            name: 'import',
            align: 'left',
            format: (_, row) => toCurrency(row.buyingValue * row.quantity),
        },
    ];
});

const saveChange = async (rowData) => {
    await axios.patch(`Buys/${rowData.id}`, rowData);
};

const openRemoveDialog = async () => {
    quasar
        .dialog({
            component: VnConfirm,
            componentProps: {
                title: t('Confirm deletion'),
                message: t(
                    `Are you sure you want to delete this buy${
                        rowsSelected.value.length > 1 ? 's' : ''
                    }?`
                ),
                data: rowsSelected.value,
            },
        })
        .onOk(async () => {
            try {
                await deleteBuys();
                const notifyMessage = t(
                    `Buy${rowsSelected.value.length > 1 ? 's' : ''} deleted`
                );
                notify(notifyMessage, 'positive');
            } catch (err) {
                console.error('Error deleting buys');
            }
        });
};

const deleteBuys = async () => {
    await axios.post('Buys/deleteBuys', { buys: rowsSelected.value });
    entryBuysPaginateRef.value.fetch();
};

const importBuys = () => {
    router.push({ name: 'EntryBuysImport' });
};
</script>

<template>
    <FetchData
        ref="expensesRef"
        url="Packagings"
        :filter="{ fields: ['id'], where: { freightItemFk: true }, order: 'id ASC' }"
        auto-load
        @on-fetch="(data) => (packagingsOptions = data)"
    />
    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
        <QBtnGroup push style="column-gap: 10px">
            <slot name="moreBeforeActions" />
            <QBtn
                :label="t('globals.remove')"
                color="primary"
                icon="delete"
                flat
                @click="openRemoveDialog()"
                :disable="!rowsSelected?.length"
                :title="t('globals.remove')"
            />
        </QBtnGroup>
    </Teleport>
    <VnPaginate
        ref="entryBuysPaginateRef"
        data-key="EntryBuys"
        :url="`Entries/${route.params.id}/getBuys`"
        auto-load
    >
        <template #body="{ rows }">
            <QTable
                :rows="rows"
                :columns="entriesTableColumns"
                selection="multiple"
                row-key="id"
                hide-bottom
                class="full-width q-mt-md"
                :grid="$q.screen.lt.md"
                v-model:selected="rowsSelected"
            >
                <template #body="props">
                    <QTr>
                        <QTd>
                            <QCheckbox v-model="props.selected" />
                        </QTd>
                        <QTd v-for="col in props.cols" :key="col.name">
                            <component
                                :is="tableColumnComponents[col.name].component()"
                                v-bind="tableColumnComponents[col.name].props(col)"
                                v-model="props.row[col.field]"
                                v-on="tableColumnComponents[col.name].event(props)"
                            >
                                <template
                                    v-if="col.name === 'item' || col.name === 'import'"
                                >
                                    {{ col.value }}
                                </template>
                            </component>
                        </QTd>
                    </QTr>
                    <QTr no-hover>
                        <QTd />
                        <QTd>
                            <span>{{ props.row.item.itemType.code }}</span>
                        </QTd>
                        <QTd>
                            <span>{{ props.row.item.id }}</span>
                        </QTd>
                        <QTd>
                            <span>{{ props.row.item.size }}</span>
                        </QTd>
                        <QTd>
                            <span>{{ toCurrency(props.row.item.minPrice) }}</span>
                        </QTd>
                        <QTd colspan="7">
                            <span>{{ props.row.item.concept }}</span>
                            <span v-if="props.row.item.subName" class="subName">
                                {{ props.row.item.subName }}
                            </span>
                            <fetched-tags :item="props.row.item" :max-length="5" />
                        </QTd>
                    </QTr>
                    <!-- Esta última row es utilizada para agregar un espaciado y así marcar una diferencia visual entre los diferentes buys -->
                    <QTr v-if="props.rowIndex !== rows.length - 1" class="separation-row">
                        <QTd colspan="12" style="height: 24px" />
                    </QTr>
                </template>
                <template #item="props">
                    <div class="q-pa-xs col-xs-12 col-sm-6 grid-style-transition">
                        <QCard bordered flat>
                            <QCardSection>
                                <QCheckbox v-model="props.selected" dense />
                            </QCardSection>
                            <QSeparator />
                            <QList dense>
                                <QItem v-for="col in props.cols" :key="col.name">
                                    <component
                                        :is="tableColumnComponents[col.name].component()"
                                        v-bind="
                                            tableColumnComponents[col.name].props(col)
                                        "
                                        v-model="props.row[col.field]"
                                        v-on="
                                            tableColumnComponents[col.name].event(props)
                                        "
                                        class="full-width"
                                    >
                                        <template
                                            v-if="
                                                col.name === 'item' ||
                                                col.name === 'import'
                                            "
                                        >
                                            {{ col.label + ': ' + col.value }}
                                        </template>
                                    </component>
                                </QItem>
                            </QList>
                        </QCard>
                    </div>
                </template>
            </QTable>
        </template>
    </VnPaginate>
    <QPageSticky :offset="[20, 20]">
        <QBtn fab icon="upload" color="primary" @click="importBuys()" />
        <QTooltip class="text-no-wrap">
            {{ t('Import buys') }}
        </QTooltip>
    </QPageSticky>
</template>

<style lang="scss" scoped>
.separation-row {
    background-color: var(--vn-gray) !important;
}
.grid-style-transition {
    transition: transform 0.28s, background-color 0.28s;
}
</style>

<i18n>
es:
    Import buys: Importar compras
    Buy deleted: Compra eliminada
    Buys deleted: Compras eliminadas
    Confirm deletion: Confirmar eliminación
    Are you sure you want to delete this buy?: Seguro que quieres eliminar esta compra?
    Are you sure you want to delete this buys?: Seguro que quieres eliminar estas compras?
</i18n>
