<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import VnInputDate from 'components/common/VnInputDate.vue';
import useNotify from 'src/composables/useNotify.js';
import axios from 'axios';

const { t } = useI18n();

const isLoading = ref(false);
const dateFrom = ref();
const dateTo = ref();
const recalc = async () => {
    const { notify } = useNotify();
    if (!dateFrom.value || !dateTo.value) {
        notify('entry.wasteRecalc.dateRequired', 'negative');
        return;
    }

    const from = new Date(dateFrom.value);
    const to = new Date(dateTo.value);

    if (from > to) {
        notify('entry.wasteRecalc.dateIncoherent', 'negative');
        return;
    }

    const params = {
        schema: 'bs',
        params: [from, to],
    };

    try {
        isLoading.value = true;
        await axios.post('Applications/waste_addSales/execute-proc', params);
        notify('entry.wasteRecalc.recalcOk', 'positive');
    } catch (err) {
        console.error('Error in execution:', err);
        notify('entry.wasteRecalc.recalcOk', 'negative');
    } finally {
        isLoading.value = false;
    }
};
</script>

<template>
    <div class="q-pa-lg row justify-center">
        <QCard class="bg-light" style="width: 300px">
            <QCardSection>
                <VnInputDate
                    class="q-mb-lg"
                    v-model="dateFrom"
                    :label="t('globals.from')"
                    rounded
                    dense
                />
                <VnInputDate
                    class="q-mb-lg"
                    v-model="dateTo"
                    :label="t('globals.to')"
                    rounded
                    dense
                />
                <QBtn
                    color="primary"
                    text-color="white"
                    :label="t('globals.recalc')"
                    icon="Calculate"
                    :loading="isLoading"
                    :disable="isLoading"
                    @click="recalc()"
                />
            </QCardSection>
        </QCard>
    </div>
</template>
