<template>
  <div id="actionNavBar kettalComponent beatriceRegular">
    <q-header
      :class="backgroundColor + ' column q-px-lg q-py-lg kettalComponent'"
      :style="'max-height: 40%; gap: 1rem;' + backgroundColor"
      class="action-nav-header"
    >
      <div>
        <div class="topHeaderContainer">
          <div class="topHeaderContainer__left">
            <div
              v-show="showBtnBack"
              id="arrow-left"
              class="float-left q-mr-lg"
              style="display: flex;align-content: center;justify-content: center;align-items: center;"
              @click="() => {
                emits('clickBackArrow')
              }"
            >
              <svg
                class="text-h4"
                xmlns="http://www.w3.org/2000/svg"
                width="30"
                height="30"
                viewBox="0 0 23.648 22.836"
              >
                <g
                  id="Arrow_brand"
                  data-name="Arrow brand"
                  transform="translate(0 22.836) rotate(-90)"
                >
                  <path
                    id="Caminho_1066"
                    data-name="Caminho 1066"
                    d="M23.648,10.644l-22.323.569L11.42,1.095,10.325,0,0,11.418,10.325,22.836l1.095-1.095-10.1-10.13,22.323.581Z"
                    transform="translate(22.836) rotate(90)"
                  />
                </g>
              </svg>
            </div>
            <div
              class="float-left"
              style="height: fit-content; display: flex"
            >
              <slot name="topLeftHeader" />
            </div>
          </div>
          <div
            class="headerContainer__center row"
            style="height: fit-content"
          >
            <!-- @slot Slot to add custom elements between breadcrumbs and menu button -->
            <slot name="centerHeader" />
          </div>
          <div
            v-if="showRightDrawerBtn"
            class="topHeaderContainer__right column no-wrap justify-center items-center"
            style="height: 37px"
            test-id="openSideBarButton"
            @click="emits('toggleRightDrawer')"
          >
            <q-icon id="menu" class="fit">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="30.448"
                height="28.247"
                viewBox="0 0 30.448 28.247"
              >
                <g
                  id="Componente_11_3"
                  data-name="Componente 11 – 3"
                  transform="translate(0 1)"
                >
                  <path
                    id="Caminho_702"
                    data-name="Caminho 702"
                    d="M38.053,40.174H24"
                    transform="translate(-7.604 -13.177)"
                    fill="none"
                    stroke="#1a1311"
                    stroke-miterlimit="10"
                    stroke-width="0.5"
                  />
                  <path
                    id="Caminho_703"
                    data-name="Caminho 703"
                    d="M45.079,31.913H24"
                    transform="translate(-14.631 -18.155)"
                    fill="none"
                    stroke="#1a1311"
                    stroke-miterlimit="10"
                    stroke-width="1"
                  />
                  <path
                    id="Caminho_704"
                    data-name="Caminho 704"
                    d="M54.448,23.328H24"
                    transform="translate(-24 -23.328)"
                    fill="none"
                    stroke="#1a1311"
                    stroke-miterlimit="10"
                    stroke-width="2"
                  />
                </g>
              </svg>
            </q-icon>
          </div>
        </div>
        <div
          class="bottomHeaderContainer row items-end"
          style="flex: 1"
        >
          <slot name="bottomHeader" />
        </div>
      </div>
      <div class="absolute">
        <slot name="drawerContainer" />
      </div>
    </q-header>
  </div>
</template>
<script setup lang="ts">
import { ActionNavBarEmits, ActionNavBarProps } from './types'
/**
 * Navigation Bar shown when user is on a page that has actions
 * @class
 * @classdesc
 */

withDefaults(defineProps<ActionNavBarProps>(), {
  backgroundColor: 'bg-k-primary',
  showBtnBack: true,
  showRightDrawerBtn: true
})

const emits = defineEmits<ActionNavBarEmits>()
</script>

<style lang="scss">
.action-nav-header {
  @media (max-width: 600px) {
    padding: 0.5rem !important;
    gap: 0.5rem !important;

    .topHeaderContainer {
      &__left {
        #arrow-left {
          svg {
            width: 20px;
            height: 20px;
          }
        }
      }

      &__right {
        height: 25px !important;
        svg {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>
