<template>
  <div class="eli-tabela__cabecalho">
    <!-- Grupo de busca: botão de colunas (à esquerda) + input de busca -->
    <div v-if="exibirBusca" class="eli-tabela__busca-grupo">
      <button
        v-if="exibirBotaoColunas"
        type="button"
        class="eli-tabela__acoes-cabecalho-botao eli-tabela__acoes-cabecalho-botao--colunas"
        @click="emitColunas"
      >
        Colunas
      </button>

      <button
        v-if="exibirBotaoFiltroAvancado"
        type="button"
        class="eli-tabela__acoes-cabecalho-botao eli-tabela__acoes-cabecalho-botao--filtro"
        @click="emitFiltroAvancado"
      >
        Filtro
      </button>
      <EliTabelaCaixaDeBusca :modelo="valorBusca" @buscar="emitBuscar" />
    </div>

    <!-- Ações do cabeçalho: ações globais da tabela -->
    <div v-if="temAcoesCabecalho" class="eli-tabela__acoes-cabecalho">
      <button
        v-for="(botao, indice) in acoesCabecalho"
        :key="`${botao.rotulo}-${indice}`"
        type="button"
        class="eli-tabela__acoes-cabecalho-botao"
        :style="botao.cor ? { backgroundColor: botao.cor, color: '#fff' } : undefined"
        @click="botao.acao"
      >
        <component
          v-if="botao.icone"
          :is="botao.icone"
          class="eli-tabela__acoes-cabecalho-icone"
          :size="16"
          :stroke-width="2"
        />
        <span class="eli-tabela__acoes-cabecalho-rotulo">{{ botao.rotulo }}</span>
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import EliTabelaCaixaDeBusca from "./EliTabelaCaixaDeBusca.vue";

export default defineComponent({
  name: "EliTabelaCabecalho",
  components: { EliTabelaCaixaDeBusca },
  props: {
    exibirBusca: {
      type: Boolean,
      required: true,
    },
    exibirBotaoColunas: {
      type: Boolean,
      required: false,
      default: true,
    },
    exibirBotaoFiltroAvancado: {
      type: Boolean,
      required: false,
      default: false,
    },
    valorBusca: {
      type: String,
      required: true,
    },
    acoesCabecalho: {
      type: Array as PropType<
        Array<{
          icone?: any;
          cor?: string;
          rotulo: string;
          acao: () => void;
        }>
      >,
      required: true,
    },
  },
  emits: {
    buscar(valor: string) {
      return typeof valor === "string";
    },
    colunas() {
      return true;
    },
    filtroAvancado() {
      return true;
    },
  },
  setup(props, { emit }) {
    const temAcoesCabecalho = computed(() => props.acoesCabecalho.length > 0);

    function emitBuscar(texto: string) {
      emit("buscar", texto);
    }

    function emitColunas() {
      emit("colunas");
    }

    function emitFiltroAvancado() {
      emit("filtroAvancado");
    }

    return { temAcoesCabecalho, emitBuscar, emitColunas, emitFiltroAvancado };
  },
});
</script>

<style scoped>
.eli-tabela__busca-grupo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
</style>
