<template>
  <q-page-container>
    <q-page>
      <div class="controls">
        <q-toggle
          v-model="showBackButton"
          test-id="toggleBackButton"
        />
        <q-btn
          test-id="setSingleButtonAutoClick"
          @click="()=>{buttons = singleButtonAutoClick}"
        />
        <q-btn
          test-id="setSingleButtonNoAutoClick"
          @click="()=>{buttons = setSingleButtonNoAutoClick}"
        />
      </div>
      <div class="content">
        <KMenuButtons
          :buttons="buttons"
          :show-back-button="showBackButton"
          @click-button="(button) => console.log(button)"
          @click-back-button="console.log('Click Back')"
        />
      </div>
    </q-page>
  </q-page-container>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import KMenuButtons from '../components/KMenuButtons/KMenuButtons.vue'
const showBackButton = ref(false)
const buttons = ref([
  {
    name: 'GestAdm',
    icon: '/src/assets/icons/Gest_Adm.svg'
  },
  {
    name: 'logisticGestion',
    icon: '/src/assets/icons/Gest_Log.svg'
  },
  {
    name: 'gestPed',
    icon: '/src/assets/icons/Gest_Ped.svg'
  }
])

const singleButtonAutoClick = [
  {
    name: 'GestAdm',
    icon: '/src/assets/icons/Gest_Adm.svg',
    autoClick: true
  }
]
const setSingleButtonNoAutoClick = [
  {
    name: 'GestAdm',
    icon: '/src/assets/icons/Gest_Adm.svg'
  }
]
</script>
