<script setup>
import { ref } from 'vue';
import VnSelect from './VnSelect.vue';

const stateBtnDropdownRef = ref();

const emit = defineEmits(['changeState']);

const $props = defineProps({
    disable: {
        type: Boolean,
        default: null,
    },
    options: {
        type: Array,
        default: null,
    },
    optionLabel: {
        type: String,
        default: 'name',
    },
    optionValue: {
        type: String,
        default: 'id',
    },
});

async function changeState(value) {
    stateBtnDropdownRef.value?.hide();
    emit('changeState', value);
}
</script>

<template>
    <QBtnDropdown
        ref="stateBtnDropdownRef"
        color="black"
        text-color="white"
        :label="$t('globals.changeState')"
        :disable="$props.disable"
    >
        <VnSelect
            :options="$props.options"
            :option-label="$props.optionLabel"
            :option-value="$props.optionValue"
            hide-selected
            hide-dropdown-icon
            focus-on-mount
            @update:model-value="changeState"
        >
        </VnSelect>
    </QBtnDropdown>
</template>
