<script setup>
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ref, computed, watch } from 'vue';
import { useQuasar } from 'quasar';
import axios from 'axios';
import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData';
import { toCurrency, toDate } from 'src/filters';

import VnConfirm from 'components/ui/VnConfirm.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';
import FetchData from 'src/components/FetchData.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import FetchedTags from 'src/components/ui/FetchedTags.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';

const router = useRouter();
const stateStore = useStateStore();
const route = useRoute();
const { t } = useI18n();
const quasar = useQuasar();
const descriptorData = useArrayData('orderData');
const componentKey = ref(0);
const tableLinesRef = ref();
const order = ref();
const orderSummary = ref({
    total: null,
    vat: null,
});
const getTotalRef = ref();
const getVATRef = ref();

const lineFilter = ref({
    include: [
        {
            relation: 'item',
            scope: {
                fields: [
                    'id',
                    'name',
                    'subName',
                    'image',
                    'tag4',
                    'value4',
                    'tag5',
                    'value5',
                    'tag6',
                    'value6',
                    'tag7',
                    'value7',
                    'tag8',
                    'value8',
                    'tag9',
                    'value9',
                    'tag10',
                    'value10',
                ],
            },
        },
        {
            relation: 'warehouse',
            scope: {
                fields: ['id', 'name'],
            },
        },
        {
            relation: 'order',
            scope: {
                fields: ['id', 'isConfirmed'],
                where: { id: route.params.id },
            },
        },
    ],
    where: { orderFk: route.params.id },
});

const columns = computed(() => [
    {
        align: 'center',
        label: t('lines.image'),
        name: 'image',
        columnField: {
            component: VnImg,
            attrs: ({ row }) => {
                return {
                    id: row.id,
                    width: '50px',
                };
            },
        },
        columnFilter: false,
    },
    {
        align: 'left',
        name: 'id',
        label: t('lines.item'),
        chip: {
            condition: () => true,
        },
        isId: true,
        format: (row) => row?.item?.id,
    },
    {
        align: 'left',
        name: 'itemFk',
        label: t('globals.description'),
        isTitle: true,
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'Items',
            fields: ['id', 'name', 'subName'],
        },
        columnField: {
            component: null,
        },
        format: (row) => row?.item?.name,
        columnClass: 'expand',
    },
    {
        align: 'left',
        name: 'warehouseFk',
        label: t('lines.warehouse'),
        cardVisible: true,
        component: 'select',
        attrs: {
            url: 'Warehouses',
            fields: ['id', 'name'],
        },
        columnField: {
            component: null,
        },
        format: (row) => row?.warehouse?.name,
    },
    {
        align: 'left',
        name: 'shipped',
        label: t('lines.shipped'),
        cardVisible: true,
        component: 'date',
        columnField: {
            component: null,
        },
        format: (row) => toDate(row.shipped),
    },
    {
        align: 'left',
        name: 'quantity',
        label: t('lines.quantity'),
    },
    {
        align: 'left',
        name: 'price',
        label: t('lines.price'),
        cardVisible: true,
        format: (row) => toCurrency(row.price),
    },
    {
        align: 'left',
        name: 'amount',
        label: t('lines.amount'),
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('Delete'),
                icon: 'delete',
                show: (row) => !row.order.isConfirmed,
                action: (row) => confirmRemove(row),
                isPrimary: true,
            },
        ],
    },
]);

function confirmRemove(item) {
    quasar.dialog({
        component: VnConfirm,
        componentProps: {
            title: t('confirmDeletion'),
            message: t('confirmDeletionMessage'),
            promise: async () => remove(item),
        },
    });
}

async function remove(item) {
    await axios.post('OrderRows/removes', {
        actualOrderId: route.params.id,
        rows: [item.id],
    });
    quasar.notify({
        message: t('globals.dataDeleted'),
        type: 'positive',
    });
    tableLinesRef.value.reload();
    descriptorData.fetch({});
    getTotalRef.value.fetch();
    getVATRef.value.fetch();
}

async function confirmOrder() {
    await axios.post(`Orders/${route.params.id}/confirm`);
    quasar.notify({
        message: t('globals.confirm'),
        type: 'positive',
    });
    router.push({
        name: 'TicketList',
        query: {
            table: JSON.stringify({ clientFk: descriptorData.store.data.clientFk }),
        },
    });
}

watch(
    () => router.currentRoute.value.params.id,
    () => {
        lineFilter.value.where.orderFk = router.currentRoute.value.params.id;

        tableLinesRef.value.reload();
    }
);
</script>

<template>
    <FetchData
        :key="componentKey"
        :url="`Orders/${route.params.id}`"
        @on-fetch="(data) => (order = data)"
        auto-load
    />
    <FetchData
        ref="getTotalRef"
        :key="componentKey"
        :url="`Orders/${route.params.id}/getTotal`"
        @on-fetch="(data) => (orderSummary.total = data)"
        auto-load
    />
    <FetchData
        ref="getVATRef"
        :key="componentKey"
        :url="`Orders/${route.params.id}/getVAT`"
        @on-fetch="(data) => (orderSummary.vat = data)"
        auto-load
    />
    <QDrawer side="right" :width="265" v-model="stateStore.rightDrawer">
        <QCard
            class="order-lines-summary q-pa-lg"
            v-if="orderSummary.vat && orderSummary.total"
        >
            <p class="header text-right block">
                {{ t('summary') }}
            </p>
            <VnLv
                :label="t('subtotal') + ': '"
                :value="toCurrency(orderSummary.total - orderSummary.vat)"
            />
            <VnLv :label="t('VAT') + ': '" :value="toCurrency(orderSummary?.vat)" />
            <VnLv :label="t('total') + ': '" :value="toCurrency(orderSummary?.total)" />
        </QCard>
    </QDrawer>

    <VnTable
        ref="tableLinesRef"
        data-key="OrderLines"
        url="OrderRows"
        :columns="columns"
        :right-search="false"
        :use-model="true"
        auto-load
        :user-filter="lineFilter"
    >
        <template #column-image="{ row }">
            <div class="image-wrapper">
                <VnImg
                    :id="parseInt(row?.item?.image)"
                    class="rounded"
                    zoom-resolution="1600x900"
                />
            </div>
        </template>
        <template #column-id="{ row }">
            <span class="link" @click.stop>
                {{ row?.item?.id }}
                <ItemDescriptorProxy :id="row?.item?.id" />
            </span>
        </template>
        <template #column-itemFk="{ row }">
            <div class="row column full-width justify-between items-start">
                {{ row?.item?.name }}
                <div v-if="row?.item?.subName" class="subName">
                    {{ row?.item?.subName.toUpperCase() }}
                </div>
            </div>
            <FetchedTags :item="row?.item" />
        </template>
        <template #column-amount="{ row }">
            {{ toCurrency(row.quantity * row.price) }}
        </template>
        <template #column-tableActions="{ row }">
            <QIcon
                v-if="row.order?.isConfirmed === 0"
                name="delete"
                icon="delete"
                @click="confirmRemove(row)"
                class="cursor-pointer"
            />
        </template>
    </VnTable>
    <QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed" style="z-index: 2">
        <QBtn fab icon="check" color="primary" @click="confirmOrder()" />
        <QTooltip>
            {{ t('confirm') }}
        </QTooltip>
    </QPageSticky>
</template>

<style lang="scss" scoped>
.order-lines-summary {
    .vn-label-value {
        display: flex;
        justify-content: flex-end;
        gap: 2%;

        .label {
            color: var(--vn-label-color);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.image-wrapper {
    height: 50px;
    width: 50px;
    margin-left: 30%;
}

.header {
    color: $primary;
    font-weight: bold;
    margin-bottom: 25px;
    font-size: 20px;
    display: inline-block;
}

.no-result {
    font-size: 24px;
    font-weight: bold;
    color: var(--vn-label-color);
    text-align: center;
}

.subName {
    text-transform: uppercase;
    color: var(--vn-label-color);
}
</style>

<i18n>
en:
    summary: Summary
    subtotal: Subtotal
    VAT: VAT
    total: Total
    item: Item
    warehouse: Warehouse
    shipped: Shipped
    quantity: Quantity
    price: Price
    amount: Amount
    remove: Remove
    confirmDeletion: Confirm deletion,
    confirmDeletionMessage: Are you sure you want to delete this item?
    confirm: Confirm
es:
    summary: Resumen
    subtotal: Subtotal
    VAT: IVA
    total: Total
    item: Artículo
    warehouse: Almacén
    shipped: F. envío
    quantity: Cantidad
    price: Precio
    amount: Importe
    remove: Eliminar
    confirmDeletion: Confirmar eliminación,
    confirmDeletionMessage: Seguro que quieres eliminar este artículo?
    confirm: Confirmar
</i18n>
