<template>
  <div
    v-if="selection === 'none'"
    class="row items-center full-height float-right no-wrap"
    test-id="tableActionButtons"
  >
    <div v-for="item in pageActions" :key="item.title" class="q-pr-sm">
      <q-btn
        v-if="item.type !== 'expand'"
        class="row justify-center bg-k-accent text-k-white"
        :label="$t(item.title)"
        square
        :test-id="item.title + 'TopBar'"
        @click="emits('activeAction', item)"
      />
      <q-btn-dropdown
        v-if="item.type === 'expand'"
        square
        outline
        :label="$t(item.title)"
        menu-anchor="bottom start"
        menu-self="top start"
        content-style="margin-top: 0.5rem !important; border-radius: 0px !important;"
        content-class="bg-k-white text-k-accent beatriceRegular"
        unelevated
        :test-id="item.title + 'TopBarButton'"
        class="text-k-accent"
      >
        <q-list
          class="KTableTop__dropdownList"
          :test-id="item.title + 'TopBarButtonDropdownList'"
        >
          <div v-for="button in item.content" :key="button.title" v-close-popup>
            <q-btn
              :key="button.title"
              :test-id="button.title + 'TopBar'"
              class="items-start row justify-start text-start"
              style="width: 100% !important"
              :label="$t(button.title)"
              flat
              @click="emits('activeAction', button)"
            />
          </div>
        </q-list>
      </q-btn-dropdown>
    </div>
  </div>
  <div v-if="selection !== 'none'" class="row">
    <q-btn
      square
      outline
      class="row no-wrap text-color-error"
      style="min-width: 10rem"
      test-id="cancelActionButton"
      @click="emits('onCancelSelection')"
    >
      <q-icon name="close" />
      <div>{{ $t("cancel") }}</div>
    </q-btn>
    <q-btn
      v-if="selected.length > 0"
      square
      class="no-wrap bg-k-positive text-k-white"
      style="min-width: 10rem"
      test-id="confirmActionButton"
      @click="emits('onConfirmSelection')"
    >
      <q-icon name="check" />
      <div>{{ $t("confirm") }}</div>
    </q-btn>
  </div>
  <q-btn
    square
    outline
    class="no-wrap row justify-center no-wrap"
    test-id="showColumnSidebar"
    @click="
      () => {
        emits('toggleColumnDrawer');
      }
    "
  >
    <div class="no-wrap row items-center">
      <KTableColumnIcon />
      <div>{{ $t("columns") }}</div>
    </div>
  </q-btn>
</template>
<script setup>
import KTableColumnIcon from "./KTableColumnIcon.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",
]);
</script>
<style></style>
