<script setup>
defineProps({
  isDeletable: Boolean
})


const { getMenuType } = useRoleMenu()

// This will be set using the composable method
const defaultSideBarMenu = ref('Menu')


const emit = defineEmits(['create', 'destroy'])

const headerActionRef = ref(null)
const headerActionFocus = () => {
  if(headerActionRef.value) {
    headerActionRef.value.focus()
  }
}
const pressKeyN = (e) => {
  if(e.code == 'KeyN' || e.keyCode == 78) {
    emit('create')
  }
}
onMounted(() => {
  headerActionFocus()
  defaultSideBarMenu.value = getMenuType()
})
</script>

<template>
  <div v-if="defaultSideBarMenu !== 'c'" ref="headerActionRef" @mouseenter="headerActionFocus" class="headerActionFocus d-flex justify-between mb-3" @keyup="pressKeyN($event)" tabindex="0">
    <h4></h4>

    <div class="d-flex gap-0.75rem">

      <button type="button" @click="emit('create')" class="button is-success">+ NEW</button>

      <button type="button" @click="emit('destroy')" class="button is-danger" :class="!isDeletable ? 'pointerEvents-none opacity-0.6 filter-grayscale(1)' : ''">
        <span class="tf-icon ti ti-trash ti-xs color-inherit"></span>
      </button>

      <slot></slot>
    </div>

  </div>
</template>

<style scoped>
.headerActionFocus:focus {
  outline: 0.1em dashed #3ec487;
  padding: 0.1em;
  border-radius: 3px;
}
</style>