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

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

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

const typesTaxes = ref([]);
const typesTransactions = ref([]);
const postcodesOptions = ref([]);

function handleLocation(data, location) {
    const { town, code, provinceFk, countryFk } = location ?? {};
    data.postcode = code;
    data.city = town;
    data.provinceFk = provinceFk;
    data.countryFk = countryFk;
}
</script>

<template>
    <FetchData auto-load @on-fetch="(data) => (typesTaxes = data)" url="SageTaxTypes" />
    <FetchData
        auto-load
        @on-fetch="(data) => (typesTransactions = data)"
        url="SageTransactionTypes"
    />
    <FormModel
        :url-update="`Clients/${route.params.id}/updateFiscalData`"
        :url="`Clients/${route.params.id}/getCard`"
        auto-load
        model="customer"
    >
        <template #form="{ data, validate }">
            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnInput
                        :label="t('Social name')"
                        :required="true"
                        :rules="validate('client.socialName')"
                        v-model="data.socialName"
                    />
                </div>
                <div class="col">
                    <VnInput :label="t('Tax number')" v-model="data.fi" />
                </div>
            </VnRow>

            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnInput :label="t('Street')" v-model="data.street" />
                </div>
            </VnRow>

            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <VnSelectFilter
                        :label="t('Sage tax type')"
                        :options="typesTaxes"
                        hide-selected
                        option-label="vat"
                        option-value="id"
                        v-model="data.sageTaxTypeFk"
                    />
                </div>
                <div class="col">
                    <VnSelectFilter
                        :label="t('Sage transaction type')"
                        :options="typesTransactions"
                        hide-selected
                        option-label="vat"
                        option-value="id"
                        v-model="data.sageTransactionTypeFk"
                    />
                </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.postcode"
                        @update:model-value="(location) => handleLocation(data, location)"
                    >
                    </VnLocation>
                </div>
            </VnRow>

            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <QCheckbox :label="t('Active')" v-model="data.isActive" />
                </div>
                <div class="col">
                    <QCheckbox :label="t('Frozen')" v-model="data.isFreezed" />
                </div>
            </VnRow>

            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <QCheckbox :label="t('Has to invoice')" v-model="data.hasToInvoice" />
                </div>
                <div class="col">
                    <QCheckbox :label="t('Vies')" v-model="data.isVies" />
                </div>
            </VnRow>

            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <QCheckbox
                        :label="t('Notify by email')"
                        v-model="data.isToBeMailed"
                    />
                </div>
                <div class="col">
                    <QCheckbox
                        :label="t('Invoice by address')"
                        v-model="data.hasToInvoiceByAddress"
                    />
                </div>
            </VnRow>

            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <QCheckbox
                        :label="t('Is equalizated')"
                        v-model="data.isEqualizated"
                    />
                </div>
                <div class="col">
                    <QCheckbox
                        :label="t('Verified data')"
                        v-model="data.isTaxDataChecked"
                    />
                </div>
            </VnRow>

            <VnRow class="row q-gutter-md q-mb-md">
                <div class="col">
                    <QCheckbox
                        :label="t('Incoterms authorization')"
                        v-model="data.hasIncoterms"
                    />
                </div>
                <div class="col">
                    <QCheckbox
                        :label="t('Electronic invoice')"
                        v-model="data.hasElectronicInvoice"
                    />
                </div>
            </VnRow>
        </template>
    </FormModel>
</template>

<i18n>
es:
    Social name: Razón social
    Tax number: NIF / CIF
    Street: Dirección fiscal
    Sage tax type: Tipo de impuesto Sage
    Sage transaction type: Tipo de transacción Sage
    Postcode: Código postal
    City: Población
    Province: Provincia
    Country: País
    Active: Activo
    Frozen: Congelado
    Has to invoice: Factura
    Vies: Vies
    Notify by email: Notificar vía e-mail
    Invoice by address: Facturar por consignatario
    Is equalizated: Recargo de equivalencia
    Verified data: Datos comprobados
    Incoterms authorization: Autorización incoterms
    Electronic invoice: Factura electrónica
</i18n>
