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

import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnInputTime from 'components/common/VnInputTime.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';

const { t } = useI18n();
const router = useRouter();

const newZoneForm = reactive({
    travelingDays: 0,
    price: 0.2,
    bonus: 0.2,
    hour: Date.vnNew(),
    isVolumetric: false,
});
const warehousesOptions = ref([]);
const agencyOptions = ref([]);

const redirectToZoneLocations = (_, { id }) => {
    router.push({ name: 'ZoneLocations', params: { id } });
};
</script>

<template>
    <FetchData
        url="Warehouses"
        :filter="{ order: ['name'] }"
        @on-fetch="(data) => (warehousesOptions = data)"
        auto-load
    />
    <FetchData
        url="AgencyModes/isActive"
        :filter="{ order: ['name'] }"
        @on-fetch="(data) => (agencyOptions = data)"
        auto-load
    />
    <QPage>
        <VnSubToolbar />
        <FormModel
            url-create="Zones"
            model="Zones"
            :form-initial-data="newZoneForm"
            @on-data-saved="redirectToZoneLocations"
        >
            <template #form="{ data }">
                <VnRow>
                    <VnInput
                        v-model="data.name"
                        :label="t('create.name')"
                        :required="true"
                    />
                </VnRow>
                <VnRow>
                    <VnSelect
                        :label="t('create.warehouse')"
                        :options="warehousesOptions"
                        hide-selected
                        option-label="name"
                        option-value="id"
                        v-model="data.warehouseFk"
                    />
                    <VnSelect
                        :label="t('create.agency')"
                        :options="agencyOptions"
                        hide-selected
                        option-label="name"
                        option-value="id"
                        v-model="data.agencyModeFk"
                        :required="true"
                    />
                </VnRow>
                <VnRow>
                    <VnInput
                        v-model="data.travelingDays"
                        :label="t('create.travelingDays')"
                        type="number"
                        min="0"
                    />

                    <VnInputTime v-model="data.hour" :label="t('create.closingHour')" />
                </VnRow>
                <VnRow>
                    <VnInput
                        v-model="data.price"
                        :label="t('create.price')"
                        type="number"
                        min="0"
                    />
                    <VnInput
                        v-model="data.bonus"
                        :label="t('create.bonus')"
                        type="number"
                        min="0"
                    />
                </VnRow>
                <VnRow>
                    <QCheckbox
                        :label="t('create.volumetric')"
                        v-model="data.isVolumetric"
                        :toggle-indeterminate="false"
                    />
                </VnRow>
            </template>
        </FormModel>
    </QPage>
</template>
