<template>
  <div class="row items-center full-height lt-md">
    <q-btn
      square
      outline
      label="Table Actions"
      class="no-wrap row justify-center no-wrap"
      test-id="showColumnSidebar"
      @click="() => {
        toggleTableActionsDrawer = !toggleTableActionsDrawer;
      }
      "
    />
    <q-drawer
      v-model="toggleTableActionsDrawer"
      overlay
      side="right"
    >
      <div
        :class="'col window-height bg-k-primary ' + headerColor"
        test-id="columnsDrawer"
        :style="'background-color:' + headerColor"
      >
        <div class="columnsDrawer__closeButton">
          <div>{{ $t("actions") }}</div>
          <span
            test-id="closeColumnDrawer"
            @click="emits('toggleColumnDrawer')"
          >
            <ExitIcon />
          </span>
        </div>
        <q-list class="q-mt-xl column items-start justify-start text-right  q-pl-lg q-pr-md">
          <div
            v-for="(link, i) in pageActions"
            :key="i"
            test-id="actionButtons"
            class=" full-width text-left"
          >
            <!-- If is Expandable -->
            <q-list v-if="link.type === 'expand'">
              <q-expansion-item
                group="tableButtons"
                :test-id="link.title + 'SideBarButton'"
              >
                <template #header>
                  <q-item-section>
                    {{ $t(link.title) }}
                  </q-item-section>
                </template>
                <q-item
                  v-for="(item, j) in link.content"
                  :key="j"
                  clickable
                  :test-id="item.title + 'SideBar'"
                  @click="() => {
                    toggleTableActionsDrawer = false;
                    emits('activeAction', item);
                  }"
                >
                  <q-item-section>
                    <q-item-label>{{ $t(item.title) }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-expansion-item>
            </q-list>
            <!-- Else -->
            <q-item
              v-else
              clickable
              :test-id="link.title + 'SideBar'"
              @click="() => {
                toggleTableActionsDrawer = false;
                emits('activeAction', item);
              }"
            >
              <q-item-section>
                <q-item-label>{{ $t(link.title) }}</q-item-label>
              </q-item-section>
            </q-item>
          </div>
          <q-item
            clickable
            test-id="showTableColumnsButton"
            @click="() => {

              toggleTableActionsDrawer = false;
              emits('toggleColumnDrawer');
            }"
          >
            <q-item-section>
              <q-item-label>{{ $t("customizeColumns") }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </div>
    </q-drawer>
  </div>
</template>
<script setup>
import ExitIcon from '@assets/icons/ExitKettal.svg'
import { ref } from 'vue'

defineProps({
  /** Selection type */
  selection: {
    type: String,
    default: 'none'
  },
  /** List of action of current page */
  pageActions: {
    type: Array,
    required: true
  },
  /** Array of selected rows */
  selected: {
    type: Array,
    required: true
  }
})
const emits = defineEmits(['activeAction', 'onCancelSelection', 'onConfirmSelection', 'toggleColumnDrawer'])

const toggleTableActionsDrawer = ref(false)
</script>
  <style></style>
