<script setup>
    import { ref } from 'vue';
    import VueMultiselect from 'vue-multiselect'
    import { getSettingsQuery } from '../../services/public';
    import { useI18n } from 'vue-i18n';

    const options = ref([]);
    const isLoading = ref(false);
    const { t } = useI18n();

    // defineProps(['selectedTruckType']);
    defineProps({
        selectedTruckType: {
            type: Array
        },
        multiple: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        }
    });
    defineEmits(['update:selectedTruckType', 'clear-option'])

    const getTruckTypesQuery = async(query) => {
        isLoading.value = true;
        let filter = {
            meta_key:'truck_type',
            query: query
        }
        const resp = await getSettingsQuery(filter);
        isLoading.value = false;
        options.value = resp;
    }
</script>

<template>
    <VueMultiselect
        :value="selectedTruckType"
        @input="$event => $emit('update:selectedTruckType', $event.target.value)"
        :options="options"
        :multiple="multiple"
        :loading="isLoading"
        :searchable="true"
        :disabled="disabled"
        :close-on-select="true"
        @search-change="getTruckTypesQuery"
        @remove="$emit('clear-option')"
        label="meta_value"
        track-by="meta_value"
        :placeholder="t('labels.selectTruck')"
        :selectLabel="t('global.helpSelected')"
        :selectedLabel="t('global.selected')"
        :deselectLabel="t('global.removeSelected')"
    >
        <template #noResult>
            {{ t('global.notFound') }}
        </template>
        <template #noOptions>
            {{ t('global.emptyList') }}
        </template>
    </VueMultiselect>
</template>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>

<style scoped>

</style>