<template>
  <div class="kettalComponent">
    <div
      class="row col-md-9 col-sm-12 menuButtons justify-end kettalComponent"
      test-id="menuButtons"
    >
      <a
        v-for="(item, i) in buttons"
        :key="i"
        class="col-xs-12 col-sm-8 col-md-4 col-lg-3 col-xl-3 menuItem text-k-accent text-decoration-clean"
        @click="() => {
          $emit('clickButton', item)
        }"
      >
        <div
          class="menuButtons__card full-width cursor-pointer full-height"
          :test-id="item.id"
        >
          <q-item class="menuButtons__item column items-start justify-around content-start">
            <div class="menuButtons__label justify-start text-k-accent">
              {{ $t(item.name) }}
            </div>
            <div class="iconContainer">
              <q-icon class="menuButtons__img">
                <img
                  :src="item.icon"
                  class="float-right d-flex"
                  alt=""
                ></q-icon>
            </div>
          </q-item>
        </div>
      </a>
      <a
        v-if="showBackButton"
        class="col-xs-12 col-sm-8 col-md-4 col-lg-3 col-xl-3 menuItem text-k-accent text-decoration-clean"
        test-id="backButton"
        @click="$emit('clickBackButton')
        "
      >
        <div
          class="menuButtons__card full-width cursor-pointer full-height"
          test-id="actionsBack"
        >
          <q-item
            class="menuButtons__item column items-start justify-around content-start full-width cursor-pointer full-height"
          >
            <div class="menuButtons__label justify-start ">
              {{ $t("back") }}
            </div>
            <div class="iconContainer">
              <q-icon class="menuButtons__img">
                <svg
                  class="float-right d-flex"
                  style="transform: rotate(180deg)"
                  xmlns="http://www.w3.org/2000/svg"
                  width="23.648"
                  height="22.836"
                  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>
              </q-icon>
            </div>
          </q-item>
        </div>
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue'
import { KMenuButtonsProps } from '.'

const props = withDefaults(defineProps<KMenuButtonsProps>(), {
  showBackButton: true
})
const emit = defineEmits(['clickButton', 'clickBackButton'])

watch(() => props.buttons, () => {
  if (props.buttons.length !== 1) { return }
  if (props.buttons[0].autoClick) {
    emit('clickButton', props.buttons[0])
  }
})
onMounted(() => {
  if (props.buttons.length !== 1) { return }
  if (props.buttons[0].autoClick) {
    emit('clickButton', props.buttons[0])
  }
})
</script>

<style scoped lang="scss"></style>
