<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, 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 VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';

import { useStateStore } from 'stores/useStateStore';
import { useState } from 'src/composables/useState';
import { toDate } from 'src/filters';

const state = useState();
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const stateStore = useStateStore();

const user = state.getUser();
const newEntryForm = reactive({
    supplierFk: null,
    travelFk: Number(route.query?.travelFk) || null,
    companyFk: user.value.companyFk || null,
});
const suppliersOptions = ref([]);
const travelsOptions = ref([]);
const companiesOptions = ref([]);

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

<template>
    <FetchData
        url="Suppliers"
        :filter="{ fields: ['id', 'nickname'] }"
        order="nickname"
        @on-fetch="(data) => (suppliersOptions = data)"
        auto-load
    />
    <FetchData
        url="Travels/filter"
        :filter="{ fields: ['id', 'warehouseInName'] }"
        order="id"
        @on-fetch="(data) => (travelsOptions = data)"
        auto-load
    />
    <FetchData
        ref="companiesRef"
        url="Companies"
        :filter="{ fields: ['id', 'code'] }"
        order="code"
        @on-fetch="(data) => (companiesOptions = data)"
        auto-load
    />
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#searchbar">
            <VnSearchbar
                url="Entries/filter"
                custom-route-redirect-name="EntrySummary"
                data-key="EntrySummary"
                :label="t('Search entries')"
                :info="t('You can search by entry reference')"
            />
        </Teleport>
    </template>
    <QPage>
        <VnSubToolbar />
        <FormModel
            url-create="Entries"
            model="entry"
            :form-initial-data="newEntryForm"
            @on-data-saved="redirectToEntryBasicData"
        >
            <template #form="{ data, validate }">
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnSelect
                            :label="t('Supplier')"
                            class="full-width"
                            v-model="data.supplierFk"
                            :options="suppliersOptions"
                            option-value="id"
                            option-label="nickname"
                            hide-selected
                            :required="true"
                            :rules="validate('entry.supplierFk')"
                        >
                            <template #option="scope">
                                <QItem v-bind="scope.itemProps">
                                    <QItemSection>
                                        <QItemLabel>{{ scope.opt?.nickname }}</QItemLabel>
                                        <QItemLabel caption>
                                            #{{ scope.opt?.id }}
                                        </QItemLabel>
                                    </QItemSection>
                                </QItem>
                            </template>
                        </VnSelect>
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnSelect
                            :label="t('Travel')"
                            class="full-width"
                            v-model="data.travelFk"
                            :options="travelsOptions"
                            option-value="id"
                            option-label="warehouseInName"
                            map-options
                            hide-selected
                            :required="true"
                            :rules="validate('entry.travelFk')"
                        >
                            <template #option="scope">
                                <QItem v-bind="scope.itemProps">
                                    <QItemSection>
                                        <QItemLabel
                                            >{{ scope.opt?.agencyModeName }} -
                                            {{ scope.opt?.warehouseInName }} ({{
                                                toDate(scope.opt?.shipped)
                                            }}) &#x2192;
                                            {{ scope.opt?.warehouseOutName }} ({{
                                                toDate(scope.opt?.landed)
                                            }})</QItemLabel
                                        >
                                    </QItemSection>
                                </QItem>
                            </template>
                        </VnSelect>
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnSelect
                            :label="t('Company')"
                            class="full-width"
                            v-model="data.companyFk"
                            :options="companiesOptions"
                            option-value="id"
                            option-label="code"
                            map-options
                            hide-selected
                            :required="true"
                            :rules="validate('entry.companyFk')"
                        />
                    </div>
                </VnRow>
            </template>
        </FormModel>
    </QPage>
</template>

<i18n>
    es:
        Supplier: Proveedor
        Travel: Envío
        Company: Empresa
</i18n>
