<script setup>
import toCurrency from 'src/filters/toCurrency';
import { inject, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { useRoute } from 'vue-router';
import useNotify from 'composables/useNotify';
import { useArrayData } from 'composables/useArrayData';
import VnInputNumber from 'src/components/common/VnInputNumber.vue';

const { t } = useI18n();
const { notify } = useNotify();
const emit = defineEmits(['added']);
const route = useRoute();
const props = defineProps({
    item: {
        type: Array,
        required: true,
    },
});
const onItemSaved = inject('onItemSaved');
const prices = ref((props.item.prices || []).map((item) => ({ ...item, quantity: 0 })));
const descriptorData = useArrayData('orderData');
const isLoading = ref(false);
const addToOrder = async () => {
    if (isLoading.value) return;
    isLoading.value = true;
    const items = (prices.value || []).filter((item) => Number(item.quantity) > 0);
    await axios.post('/OrderRows/addToOrder', {
        items,
        orderFk: Number(route.params.id),
    });
    notify(t('globals.dataSaved'), 'positive');
    await descriptorData.fetch({});
    onItemSaved({ ...props, items, saved: true });
    emit('added', items);
    isLoading.value = false;
};
const canAddToOrder = () => {
    let canAddToOrder = (prices.value || []).some((price) => Number(price.quantity) > 0);
    if (canAddToOrder) {
        const excedQuantity = prices.value.reduce(
            (acc, { quantity }) => acc + quantity,
            0
        );
        if (excedQuantity > props.item.available) {
            canAddToOrder = false;
        }
    }
    return canAddToOrder;
};
</script>

<template>
    <div class="container order-catalog-item q-pa-md">
        <QForm @submit="addToOrder">
            <QMarkupTable class="shadow-0">
                <tbody>
                    <tr v-for="price in prices" :key="price.warehouse">
                        <td class="text-bold q-pr-md td" style="width: 35%">
                            {{ price.warehouse }}
                        </td>
                        <td class="text-right" style="width: 35%">
                            <span
                                class="link"
                                @click.shift="
                                    () => {
                                        price.quantity -= price.grouping;
                                    }
                                "
                                @click.exact="
                                    () => {
                                        price.quantity += price.grouping;
                                    }
                                "
                            >
                                {{ price.grouping }}
                            </span>
                            x {{ toCurrency(price.price) }}
                        </td>
                        <td class="text-right">
                            <VnInputNumber
                                v-model.number="price.quantity"
                                :step="price.grouping"
                                min="0"
                            />
                        </td>
                    </tr>
                </tbody>
            </QMarkupTable>
            <div class="flex justify-center q-mt-lg">
                <QBtn
                    color="primary"
                    type="submit"
                    :disable="!isLoading && !canAddToOrder()"
                >
                    {{ t('globals.add') }}
                </QBtn>
            </div>
        </QForm>
    </div>
</template>

<style lang="scss" scoped>
.td {
    width: 200px;
}
</style>

<i18n>
es:
    noAmount: La cantidad no puede ser 0
en:
    noAmount: Amount can not be 0
</i18n>
