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

import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import FormModel from 'components/FormModel.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import VnRow from 'components/ui/VnRow.vue';
import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnLocation from 'src/components/common/VnLocation.vue';

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

const provincesOptions = ref([]);
const postcodesOptions = ref([]);
const townsLocationOptions = ref([]);
const viewAction = ref();
const updateAddressId = ref(null);
const newAddressForm = reactive({
    nickname: null,
    street: null,
    postalCode: null,
    city: null,
    provinceFk: null,
    phone: null,
    mobile: null,
});

const onDataSaved = () => {
    router.push({ name: 'SupplierAddresses' });
};

const updateAddressForm = (addressData) => {
    for (let key in newAddressForm) {
        if (key in addressData) {
            newAddressForm[key] = addressData[key];
        }
    }
};

onBeforeMount(() => {
    viewAction.value = route.query.addressData ? 'update' : 'create';

    if (viewAction.value === 'create') newAddressForm.supplierFk = route.params.id;
});

onMounted(() => {
    if (viewAction.value === 'update' && route.query.addressData) {
        const addressData = JSON.parse(route.query.addressData);
        updateAddressId.value = addressData.id;
        updateAddressForm(addressData);
    }
});
function handleLocation(data, location) {
    const { town, code, provinceFk, countryFk } = location ?? {};
    data.postalCode = code;
    data.city = town;
    data.provinceFk = provinceFk;
    data.countryFk = countryFk;
}
</script>

<template>
    <QPage>
        <FormModel
            model="supplierAddresses"
            :form-initial-data="newAddressForm"
            :url-update="
                viewAction !== 'create' ? `SupplierAddresses/${updateAddressId}` : null
            "
            :url-create="viewAction === 'create' ? 'SupplierAddresses' : null"
            :observe-form-changes="viewAction === 'create'"
            @on-data-saved="onDataSaved()"
        >
            <template #form="{ data, validate }">
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnInput
                            v-model="data.nickname"
                            :label="t('supplier.addresses.name')"
                        />
                    </div>
                    <div class="col">
                        <VnInput
                            v-model="data.street"
                            :label="t('supplier.addresses.street')"
                        />
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnLocation
                            :rules="validate('Worker.postcode')"
                            :roles-allowed-to-create="['deliveryAssistant']"
                            :options="postcodesOptions"
                            v-model="data.location"
                            @update:model-value="
                                (location) => handleLocation(data, location)
                            "
                        ></VnLocation>
                    </div>
                </VnRow>
                <VnRow class="row q-gutter-md q-mb-md">
                    <div class="col">
                        <VnInput
                            v-model="data.phone"
                            :label="t('supplier.addresses.phone')"
                        />
                    </div>
                    <div class="col">
                        <VnInput
                            v-model="data.mobile"
                            :label="t('supplier.addresses.mobile')"
                        />
                    </div>
                </VnRow>
            </template>
        </FormModel>
    </QPage>
</template>
