<template>
  <v-select
    v-model="localValue"
    :label="opcoes?.rotulo"
    :placeholder="opcoes?.placeholder"
    :items="itens"
    item-title="rotulo"
    item-value="chave"
    :loading="carregando"
    :disabled="carregando"
    :menu-props="{ maxHeight: 320 }"
    :clearable="Boolean(opcoes?.limpavel)"
    :error="Boolean(opcoes?.erro)"
    :error-messages="opcoes?.mensagensErro"
    :hint="opcoes?.dica"
    :persistent-hint="Boolean(opcoes?.dicaPersistente)"
    :density="opcoes?.densidade ?? 'comfortable'"
    :variant="opcoes?.variante ?? 'outlined'"
    v-bind="attrs"
    @focus="() => emit('focus')"
    @blur="() => emit('blur')"
  />
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, PropType, ref, watch } from "vue";
import { VSelect } from "vuetify/components";
import type { PadroesEntradas } from "./tiposEntradas";

type EntradaSelecao = PadroesEntradas["selecao"];
type ItemSelecao = { chave: string; rotulo: string };

export default defineComponent({
  name: "EliEntradaSelecao",
  components: { VSelect },
  inheritAttrs: false,
  props: {
    value: {
      type: [String, null] as unknown as PropType<EntradaSelecao["value"]>,
      default: undefined,
    },
    opcoes: {
      type: Object as PropType<EntradaSelecao["opcoes"]>,
      required: true,
    },
  },
  emits: {
    "update:value": (_v: EntradaSelecao["value"]) => true,
    input: (_v: EntradaSelecao["value"]) => true,
    change: (_v: EntradaSelecao["value"]) => true,
    focus: () => true,
    blur: () => true,
  },
  setup(props, { attrs, emit }) {
    const itens = ref<ItemSelecao[]>([]);
    const carregando = ref(false);

    const localValue = computed<EntradaSelecao["value"]>({
      get: () => props.value,
      set: (v) => {
        emit("update:value", v);
        emit("input", v);
        emit("change", v);
      },
    });

    async function carregarItens() {
      carregando.value = true;
      try {
        const resultado = await props.opcoes.itens();
        const lista = Array.isArray(resultado) ? resultado : [];

        // Força reatividade mesmo quando Vuetify mantém cache interno.
        // (garante que `items` mude de referência)
        itens.value = [...lista];
      } finally {
        carregando.value = false;
      }
    }

    // Recarrega quando muda a função (caso o consumidor troque dinamicamente).
    watch(
      () => props.opcoes.itens,
      () => {
        void carregarItens();
      }
    );

    onMounted(() => {
      void carregarItens();
    });

    // Debug (playground): ajuda a identificar se os itens chegaram.
    watch(
      itens,
      (v) => {
        // eslint-disable-next-line no-console
        console.debug("[EliEntradaSelecao] itens:", v);
      },
      { deep: true }
    );

    return { attrs, emit, localValue, opcoes: props.opcoes, itens, carregando };
  },
});
</script>

<style></style>