<template>
  <div class="d-flex flex-column ga-6">
    <section>
      <h2 class="text-h6 mb-2">EliEntradas</h2>
      <p class="text-body-2 mb-0">
        Exemplos para <code>EliEntradaTexto</code> e <code>EliEntradaNumero</code>.
      </p>
    </section>

    <v-divider />

    <section class="d-flex flex-column ga-3">
      <h3 class="text-subtitle-1">Texto</h3>

      <EliEntradaTexto
        v-model:value="texto"
        :opcoes="{
          rotulo: 'Nome',
          placeholder: 'Digite seu nome',
          limiteCaracteres: 20,
        }"
      />

      <div class="text-caption">
        <strong>v-model:value</strong>: {{ texto ?? "(null)" }}
      </div>

      <v-alert type="info" variant="tonal" density="comfortable">
        Para EliEntradas, o padrão é <code>v-model:value</code> (prop <code>value</code> + evento
        <code>update:value</code>). Mantemos também o evento <code>input</code> para compat Vue2.
      </v-alert>
    </section>

    <v-divider />

    <section class="d-flex flex-column ga-3">
      <h3 class="text-subtitle-1">Número</h3>

      <EliEntradaNumero
        v-model:value="numero"
        :opcoes="{
          rotulo: 'Quantidade',
          placeholder: 'Ex: 10',
          precisao: 1,
          sufixo: 'kg',
        }"
      />

      <div class="text-caption">
        <strong>v-model:value</strong>: {{ numero ?? "(null)" }}
      </div>

      <EliEntradaNumero
        v-model:value="numeroDecimal"
        :opcoes="{
          rotulo: 'Moeda',
          placeholder: 'Digite (2 casas)',
          precisao: 0.01,
          prefixo: 'R$',
        }"
      />

      <div class="text-caption">
        <strong>v-model:value</strong>: {{ numeroDecimal ?? "(null)" }}
      </div>
    </section>

    <v-divider />

    <section class="d-flex flex-column ga-3">
      <h3 class="text-subtitle-1">Parágrafo</h3>

      <EliEntradaParagrafo
        v-model:value="paragrafo"
        :opcoes="{
          rotulo: 'Descrição',
          placeholder: 'Digite uma descrição mais longa...',
          linhas: 5,
          limiteCaracteres: 300,
          limpavel: true,
        }"
      />

      <div class="text-caption">
        <strong>v-model:value</strong>: {{ paragrafo ?? "(null)" }}
      </div>
    </section>

    <v-divider />

    <section class="d-flex flex-column ga-3">
      <h3 class="text-subtitle-1">Seleção</h3>

      <EliEntradaSelecao
        v-model:value="selecao"
        :opcoes="{
          rotulo: 'Categoria',
          placeholder: 'Selecione...',
          limpavel: true,
          // OBS: não usar `new Promise(...)` direto no template.
          // O template do Vue resolve identificadores via `_ctx`, então `Promise`
          // pode ser tratado como variável do componente.
          itens: itensCategorias,
        }"
      />

      <div class="text-caption">
        <strong>v-model:value</strong>: {{ selecao ?? "(null)" }}
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { EliEntradaNumero, EliEntradaParagrafo, EliEntradaSelecao, EliEntradaTexto } from "../index";

export default defineComponent({
  name: "EntradasPlayground",
  components: {
    EliEntradaTexto,
    EliEntradaNumero,
    EliEntradaParagrafo,
    EliEntradaSelecao,
  },
  methods: {
    async itensCategorias() {
      // Exemplo async (simula consulta)
      await new Promise((r) => setTimeout(r, 600));
      return [
        { chave: "a", rotulo: "Categoria A" },
        { chave: "b", rotulo: "Categoria B" },
        { chave: "c", rotulo: "Categoria C" },
      ];
    },
  },
  data() {
    return {
      texto: null as string | null,
      paragrafo: null as string | null,
      selecao: null as string | null,
      numero: null as number | null,
      numeroDecimal: null as number | null,
    };
  },
});
</script>
