<script setup>
import shared from "assets/langs/shared.js";

defineProps({
  isDeletable: Boolean
})

const lang = ref('en-US')
const getLang = computed(() => {
  return shared(lang.value)
})

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()

  const storedLang = localStorage.getItem('logship_lang')
  if(storedLang) {
    // Convert format from en_US to en-US
    lang.value = storedLang.replace('_', '-')
  }
})
</script>

<template>
  <div ref="headerActionRef" @mouseenter="headerActionFocus" class="headerActionFocus d-flex justify-between items-center mb-3" @keyup="pressKeyN($event)" tabindex="0">
    <div></div>

    <div class="d-flex justify-center" style="flex: 1;">
      <slot name="center"></slot>
    </div>

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

      <button v-if="defaultSideBarMenu !== 'c'" type="button" @click="emit('create')" class="button is-success" :title="getLang['new'] || 'New'">
        <span class="ti ti-plus"></span>
      </button>
      <button type="button" @click="navigateTo('/partners/partners/add')" class="button is-success" :title="getLang['quickorder'] || 'Quick Order'">
        <span class="ti ti-bolt"></span>
      </button>

      <button v-if="defaultSideBarMenu !== 'c'" 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: none;
}
</style>