<template>
  <div
    class="bg-k-primary full-height text-left column"
    test-id="TableTopResponsiveSidebar"
  >
    <div class="text-h5 q-pa-md full-width">
      {{ $t('tableActions') }}
    </div>
    <q-separator />
    <q-list class="q-px-md overflow-auto col">
      <q-item
        clickable
        test-id="configureColumnsButton"
        @click="() => {
          emits('close')
          emits('toggleColumnDrawer')
        }"
      >
        <q-item-section>
          <q-item-label>{{ $t('configureColumns') }}</q-item-label>
        </q-item-section>
      </q-item>
      <q-separator />
      <q-item
        v-for="action in pageActions.filter(action => action.type !== 'expand')"
        :key="action.title"
        clickable
        :test-id="action.title + 'TableAction'"
        @click="() => {
          emits('activeAction', action)
          emits('close')
        }"
      >
        <q-item-section>
          <q-item-label>{{ action.title }}</q-item-label>
        </q-item-section>
      </q-item>
      <q-item
        v-for="action in pageActions.filter(action => action.type === 'expand')"
        :key="action.title"
        class="column"
        :test-id="action.title + 'TableActionsGroup'"
      >
        <q-separator class="q-mb-md" />
        <q-item-section class="text-h6 q-mb-sm">
          <q-item-label>{{ action.title }}</q-item-label>
        </q-item-section>
        <q-item-section>
          <q-item
            v-for="subAction in (action as KettalExpandAction).content"
            :key="subAction.title"
            :test-id="subAction.title + 'TableAction'"
            clickable
            @click="() => {
              emits('activeAction', subAction)
              emits('close')
            }"
          >
            <q-item-section>
              <q-item-label>{{ subAction.title }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-item-section>
      </q-item>
    </q-list>
  </div>
</template>
<script setup lang="ts">
import { KettalExpandAction, KettalPageActions } from '@/types/KTable.ts'

withDefaults(defineProps<{
  /** Title of the sidebar */
  sidebarTitle?: string,
  pageActions: KettalPageActions[]
}>(), {
  sidebarTitle: ''
})
const emits = defineEmits(['close', 'activeAction', 'toggleColumnDrawer'])
</script>
