<script setup>
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import VnRow from 'components/ui/VnRow.vue';
import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const shelvingId = route.params?.id || null;
const isNew = Boolean(!shelvingId);
const defaultInitialData = {
    parkingFk: null,
    priority: null,
    code: null,
    isRecyclable: false,
};

const parkingFilter = { fields: ['id', 'code'] };
const parkingList = ref([]);
const parkingListCopy = ref([]);

const setParkingList = (data) => {
    parkingList.value = data;
    parkingListCopy.value = data;
};

const parkingSelectFilter = {
    options: parkingList,
    filterFn: (options, value) => {
        const search = value.trim().toLowerCase();

        if (!search || search === '') {
            return parkingListCopy.value;
        }

        return options.value.filter((option) =>
            option.code.toLowerCase().startsWith(search)
        );
    },
};

const shelvingFilter = {
    include: [
        {
            relation: 'worker',
            scope: {
                fields: ['id'],
                include: {
                    relation: 'user',
                    scope: { fields: ['nickname'] },
                },
            },
        },
        { relation: 'parking' },
    ],
};

const onSave = (shelving, newShelving) => {
    if (isNew) {
        router.push({ name: 'ShelvingBasicData', params: { id: newShelving?.id } });
    }
};
</script>
<template>
    <VnSubToolbar />
    <FetchData
        url="Parkings"
        :filter="parkingFilter"
        @on-fetch="setParkingList"
        auto-load
    />
    <FormModel
        :url="isNew ? null : `Shelvings/${shelvingId}`"
        :url-create="isNew ? 'Shelvings' : null"
        :observe-form-changes="!isNew"
        :filter="shelvingFilter"
        model="shelving"
        :auto-load="!isNew"
        :form-initial-data="defaultInitialData"
        @on-data-saved="onSave"
    >
        <template #form="{ data, validate, filter }">
            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnInput
                        v-model="data.code"
                        :label="t('shelving.basicData.code')"
                        :rules="validate('Shelving.code')"
                    />
                </div>
                <div class="col">
                    <QSelect
                        v-model="data.parkingFk"
                        :options="parkingList"
                        option-value="id"
                        option-label="code"
                        emit-value
                        :label="t('shelving.basicData.parking')"
                        map-options
                        use-input
                        @filter="
                            (value, update) => filter(value, update, parkingSelectFilter)
                        "
                        :rules="validate('Shelving.parkingFk')"
                        :input-debounce="0"
                    />
                </div>
            </VnRow>
            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnInput
                        v-model="data.priority"
                        type="number"
                        :label="t('shelving.basicData.priority')"
                        :rules="validate('Shelving.priority')"
                    />
                </div>
                <div class="col">
                    <QCheckbox
                        v-model="data.isRecyclable"
                        :label="t('shelving.basicData.recyclable')"
                        :rules="validate('Shelving.isRecyclable')"
                    />
                </div>
            </VnRow>
        </template>
    </FormModel>
</template>
