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

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import CreateGenusForm from './CreateGenusForm.vue';
import CreateSpecieForm from './CreateSpecieForm.vue';

const route = useRoute();
const { t } = useI18n();

const itemBotanicalsRef = ref(null);
const itemGenusOptions = ref([]);
const itemSpeciesOptions = ref([]);
const itemBotanicals = ref([]);
let itemBotanicalsForm = reactive({ itemFk: null });

const onGenusCreated = (response, formData) => {
    itemGenusOptions.value = [...itemGenusOptions.value, response];
    formData.genusFk = response.id;
};

const onSpecieCreated = (response, formData) => {
    itemSpeciesOptions.value = [...itemSpeciesOptions.value, response];
    formData.specieFk = response.id;
};
const entityId = computed(() => {
    return route.params.id;
});
onMounted(async () => {
    itemBotanicalsForm.itemFk = entityId.value;
    itemBotanicals.value = await itemBotanicalsRef.value.fetch();
    if (itemBotanicals.value.length > 0)
        Object.assign(itemBotanicalsForm, itemBotanicals.value[0]);
});
</script>
<template>
    <FetchData
        ref="itemBotanicalsRef"
        url="ItemBotanicals"
        :filter="{
            where: { itemFk: entityId },
        }"
        @on-fetch="(data) => (itemBotanicals = data)"
    />
    <FetchData
        url="Genera"
        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
        @on-fetch="(data) => (itemGenusOptions = data)"
        auto-load
    />
    <FetchData
        url="Species"
        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
        @on-fetch="(data) => (itemSpeciesOptions = data)"
        auto-load
    />
    <FormModel
        url-update="ItemBotanicals"
        model="entry"
        auto-load
        :form-initial-data="itemBotanicalsForm"
        :clear-store-on-unmount="false"
    >
        <template #form="{ data }">
            <VnRow class="row q-gutter-md q-mb-md">
                <VnSelectDialog
                    :label="t('Genus')"
                    v-model="data.genusFk"
                    :options="itemGenusOptions"
                    option-label="name"
                    option-value="id"
                    hide-selected
                >
                    <template #form>
                        <CreateGenusForm
                            @on-data-saved="
                                (_, requestResponse) =>
                                    onGenusCreated(requestResponse, data)
                            "
                        />
                    </template>
                </VnSelectDialog>
                <VnSelectDialog
                    :label="t('Species')"
                    v-model="data.specieFk"
                    :options="itemSpeciesOptions"
                    option-label="name"
                    option-value="id"
                    hide-selected
                >
                    <template #form>
                        <CreateSpecieForm
                            @on-data-saved="
                                (_, requestResponse) =>
                                    onSpecieCreated(requestResponse, data)
                            "
                        />
                    </template>
                </VnSelectDialog>
            </VnRow>
        </template>
    </FormModel>
</template>

<i18n>
es:
    Genus: Genus
    Species: Especie
</i18n>
