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

import VnSearchbar from 'components/ui/VnSearchbar.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';

import { useStateStore } from 'stores/useStateStore';

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

const newSupplierForm = reactive({
    name: null,
});

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

<template>
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#searchbar">
            <VnSearchbar
                data-key="SuppliersList"
                :limit="20"
                :label="t('Search suppliers')"
            />
        </Teleport>
    </template>

    <QPage>
        <VnSubToolbar />
        <FormModel
            url-create="Suppliers/newSupplier"
            model="supplier"
            :form-initial-data="newSupplierForm"
            @on-data-saved="redirectToSupplierFiscalData"
        >
            <template #form="{ data }">
                <VnRow>
                    <VnInput
                        v-model="data.name"
                        :label="t('supplier.create.supplierName')"
                        @keyup="newSupplierForm.name = newSupplierForm.name.toUpperCase()"
                    />
                </VnRow>
            </template>
        </FormModel>
    </QPage>
</template>
