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

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

const viewAction = ref();
const updateAddressId = ref(null);
const newAddressForm = reactive({
    nickname: null,
    street: null,
    postalCode: null,
    city: null,
    provinceFk: null,
    phone: null,
    mobile: null,
    province: 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>
                    <VnInput
                        v-model="data.nickname"
                        :label="t('supplier.addresses.name')"
                    />
                    <VnInput
                        v-model="data.street"
                        :label="t('supplier.addresses.street')"
                    />
                </VnRow>
                <VnRow>
                    <VnLocation
                        :rules="validate('Worker.postcode')"
                        :roles-allowed-to-create="['deliveryAssistant']"
                        :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
                        :location="
                            data.postalCode
                                ? {
                                      postcode: data.postalCode,
                                      city: data.city,
                                      province: data.province,
                                      country: data.province.country,
                                  }
                                : null
                        "
                        @update:model-value="(location) => handleLocation(data, location)"
                    >
                    </VnLocation>
                </VnRow>
                <VnRow>
                    <VnInput
                        v-model="data.phone"
                        :label="t('supplier.addresses.phone')"
                    />
                    <VnInput
                        v-model="data.mobile"
                        :label="t('supplier.addresses.mobile')"
                    />
                </VnRow>
            </template>
        </FormModel>
    </QPage>
</template>
