<script setup>
import toCurrency from '../../../filters/toCurrency';
import { 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';

const { t } = useI18n();
const { notify } = useNotify();
const emit = defineEmits(['added']);
const route = useRoute();
const props = defineProps({
    prices: {
        type: Array,
        required: true,
    },
});

const fields = ref((props.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 = (fields.value || []).filter((item) => Number(item.quantity) > 0);
    await axios.post('/OrderRows/addToOrder', {
        items,
        orderFk: Number(route.params.id),
    });
    notify(t('globals.dataSaved'), 'positive');
    emit('added');
    descriptorData.fetch({});
    isLoading.value = false;
};
const canAddToOrder = () => {
    return (fields.value || []).some((item) => Number(item.quantity) > 0);
};
</script>

<template>
    <div class="container order-catalog-item q-pa-md">
        <QForm @submit="addToOrder">
            <QMarkupTable class="shadow-0">
                <tbody>
                    <tr v-for="item in fields" :key="item.warehouse">
                        <td class="text-bold q-pr-md td" style="width: 35%">
                            {{ item.warehouse }}
                        </td>
                        <td class="text-right" style="width: 35%">
                            <span
                                class="link"
                                @click="
                                    () => {
                                        item.quantity += item.grouping;
                                    }
                                "
                            >
                                {{ item.grouping }}
                            </span>
                            x {{ toCurrency(item.price) }}
                        </td>
                        <td class="text-right">
                            <QInput
                                v-model.number="item.quantity"
                                type="number"
                                :step="item.grouping"
                                min="0"
                                dense
                            />
                        </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>
