<script setup>
import CreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
import VnSelectDialog from 'components/common/VnSelectDialog.vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const value = defineModel({ type: [String, Number, Object] });

function showLabel(data) {
    return `${data.code} - ${data.town}(${data.province}), ${data.country}`;
}
</script>
<template>
    <VnSelectDialog
        v-model="value"
        option-value="code"
        option-filter-value="search"
        :option-label="(opt) => showLabel(opt)"
        url="Postcodes/filter"
        :use-like="false"
        :label="t('Location')"
        :placeholder="t('search_by_postalcode')"
        :input-debounce="300"
        :class="{ required: $attrs.required }"
        v-bind="$attrs"
        clearable
        :emit-value="false"
    >
        <template #form>
            <CreateNewPostcode @on-data-saved="(newValue) => (value = newValue)" />
        </template>
        <template #option="{ itemProps, opt }">
            <QItem v-bind="itemProps">
                <QItemSection v-if="opt.code">
                    <QItemLabel>{{ opt.code }}</QItemLabel>
                    <QItemLabel caption>{{ showLabel(opt) }}</QItemLabel>
                </QItemSection>
            </QItem>
        </template>
    </VnSelectDialog>
</template>
<style lang="scss" scoped>
.add-icon {
    cursor: pointer;
    background-color: $primary;
    border-radius: 50px;
}
</style>

<i18n>
en:
    search_by_postalcode: Search by postalcode, town, province or country
es:
    Location: Ubicación
    search_by_postalcode: Buscar por código postal, ciudad o país
</i18n>
