<template>
  <tbody class="eli-tabela__tbody">
    <template v-for="(linha, i) in linhas" :key="`grp-${i}`">
      <tr
        class="eli-tabela__tr"
        :class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : undefined]"
      >
        <td v-if="temColunasInvisiveis" class="eli-tabela__td eli-tabela__td--expander" :key="`td-${i}-exp`">
          <button
            type="button"
            class="eli-tabela__expander-botao"
            :class="[linhasExpandidas?.[i] ? 'eli-tabela__expander-botao--ativo' : undefined]"
            :aria-expanded="linhasExpandidas?.[i] ? 'true' : 'false'"
            :aria-label="linhasExpandidas?.[i] ? 'Ocultar colunas ocultas' : 'Mostrar colunas ocultas'"
            :title="linhasExpandidas?.[i] ? 'Ocultar detalhes' : 'Mostrar detalhes'"
            @click.stop="alternarLinhaExpandida(i)"
          >
            <component
              :is="linhasExpandidas?.[i] ? ChevronDown : ChevronRight"
              class="eli-tabela__expander-icone"
              :size="16"
              :stroke-width="2"
              aria-hidden="true"
            />
          </button>
        </td>

        <td
          v-for="(coluna, j) in colunas"
          :key="`td-${i}-${j}`"
          class="eli-tabela__td"
        >
          <EliTabelaCelula :celula="(coluna.celula(linha as never) as never)" />
        </td>

        <td v-if="temAcoes" class="eli-tabela__td eli-tabela__td--acoes" :key="`td-${i}-acoes`">
          <div
            class="eli-tabela__acoes-container"
            :class="[menuAberto === i ? 'eli-tabela__acoes-container--aberto' : undefined]"
          >
            <button
              class="eli-tabela__acoes-toggle"
              type="button"
              :id="`eli-tabela-acoes-toggle-${i}`"
              :disabled="!possuiAcoes(i)"
              :aria-haspopup="'menu'"
              :aria-expanded="menuAberto === i ? 'true' : 'false'"
              :aria-controls="possuiAcoes(i) ? `eli-tabela-acoes-menu-${i}` : undefined"
              :aria-label="possuiAcoes(i) ? 'Ações da linha' : 'Nenhuma ação disponível'"
              :title="possuiAcoes(i) ? 'Ações' : 'Nenhuma ação disponível'"
              @click.stop="toggleMenu(i, $event)"
            >
              <MoreVertical class="eli-tabela__acoes-toggle-icone" :size="18" :stroke-width="2" />
            </button>
          </div>
        </td>
      </tr>

      <tr
        v-if="temColunasInvisiveis && Boolean(linhasExpandidas?.[i])"
        class="eli-tabela__tr eli-tabela__tr--detalhes"
        :class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : undefined]"
      >
        <td
          class="eli-tabela__td eli-tabela__td--detalhes"
          :colspan="(temColunasInvisiveis ? 1 : 0) + colunas.length + (temAcoes ? 1 : 0)"
        >
          <EliTabelaDetalhesLinha :linha="linha" :colunasInvisiveis="colunasInvisiveis" />
        </td>
      </tr>
    </template>
  </tbody>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
import { ChevronDown, ChevronRight, MoreVertical } from "lucide-vue-next";
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
import EliTabelaDetalhesLinha from "./EliTabelaDetalhesLinha.vue";
import type { tipoEliColuna } from "./types-eli-tabela";

export default defineComponent({
  name: "EliTabelaBody",
  components: {
    EliTabelaCelula,
    EliTabelaDetalhesLinha,
    MoreVertical,
    ChevronRight,
    ChevronDown,
  },
  props: {
    colunas: {
      type: Array as PropType<Array<tipoEliColuna<any>>>,
      required: true,
    },
    colunasInvisiveis: {
      type: Array as PropType<Array<tipoEliColuna<any>>>,
      required: true,
    },
    temColunasInvisiveis: {
      type: Boolean,
      required: true,
    },
    linhasExpandidas: {
      type: Object as PropType<Record<number, boolean>>,
      required: true,
    },
    linhas: {
      type: Array as PropType<Array<unknown>>,
      required: true,
    },
    temAcoes: {
      type: Boolean,
      required: true,
    },
    menuAberto: {
      type: Number as PropType<number | null>,
      required: true,
    },
    possuiAcoes: {
      type: Function as PropType<(i: number) => boolean>,
      required: true,
    },
    toggleMenu: {
      type: Function as PropType<(indice: number, evento: MouseEvent) => void>,
      required: true,
    },
    alternarLinhaExpandida: {
      type: Function as PropType<(indice: number) => void>,
      required: true,
    },
  },
  setup() {
    return {
      ChevronRight,
      ChevronDown,
    };
  },
});
</script>
