<template>
  <BaseMenu :label="label"
            :items="items"
            :active-class="activeClasses"
            :class="isNested ? '' : navMenuClass"
            :button-class="buttonClasses"
            :item-class="itemClasses"
            :items-class="itemsClasses"
            :icon="icon"
            :item-icon-class="itemIconClasses"
            :right="right"
            :dropright="dropright"
            :dropleft="dropleft"
            :dropup="dropup"
  >
    <template #button="{ open, active }"><slot name="button" :open="open" :active="active"></slot></template>

    <slot>
      <template v-for="item in items" :key="item.key">
        <AisMenuDivider v-if="item.type === 'divider'"/>

        <AisMenuGroup v-else-if="item.type === 'group'"
                      :label="item.label"
                      :items="item.items"
                      :header-class="item.headerClass"
                      :header-as="item.headerAs"/>

        <AisMenu v-else-if="item.children && item.children.length > 0"
                 :label="item.label"
                 :items="item.children"
                 :icon="item.icon"
                 :disabled="item.disabled"
                 :dark="dark"
                 :right="item.right"
                 :dropright="item.dropright || !(item.dropleft || item.dropup || right)"
                 :dropleft="item.dropleft || right"
                 :dropup="item.dropup || dropup"
        ></AisMenu>

        <AisMenuItem v-else
                     :as="item.as"
                     :label="item.label"
                     :label-class="item.labelClass"
                     :to="item.to"
                     :href="item.href"
                     :disabled="disabled || item.disabled"
                     :icon="item.icon"
                     :icon-class="item.iconClass"
                     :arrow-icon="item.arrowIcon"
                     :arrow-class="item.arrowClass"
        ></AisMenuItem>
      </template>
    </slot>
  </BaseMenu>
</template>

<script setup>
import { computed, inject, onMounted, provide, ref } from "vue";
import BaseMenu from "@/components/menu/BaseMenu.vue";
import AisMenuDivider from "@/components/menu/AisMenuDivider.vue";
import AisMenuItem from "@/components/menu/AisMenuItem.vue";
import AisMenuGroup from "@/components/menu/AisMenuGroup.vue";
import { transitionProps } from "@/util/transition-props";
import { aisMenuProps } from "@/components/menu/ais-menu-props";


const isNested = inject('isNested', '')
const buttonClassInjected = inject('buttonClass', '')
const navMenuClass = inject('navMenuClass', '')
const navIsDark = inject('navIsDark', '')
const navItemClass = inject('navItemClass', '')
const registerNavItem = inject('registerNavItem', undefined)

const menuItems = ref([])

const props = defineProps({
  ...aisMenuProps,
  ...transitionProps,
})

const isDark = computed(() => props.dark || (navIsDark && navIsDark.value === true))

const activeClasses = computed(() => {
  if(isNested.value) return ''

  if(isDark.value) return 'bg-ui-gray-100 !text-secondary'

  return 'bg-ui-gray-50'
})
const itemClasses = computed(() => {
  if(isNested.value) return ''

  const classes = ['block items-center gap-2 p-2 whitespace-nowrap text-left']
  if(isDark.value)
    classes.push('text-white')
  else
    classes.push('text-secondary ')

  return classes.join(' ')
})
const itemsClasses = computed(() => {
  if(isNested.value) return ''

  const classes = ['ais-menu-dropdown rounded shadow-xl']
  if(isDark.value)
    classes.push('bg-secondary')
  else
    classes.push('bg-gray-50 border border-ui-gray-100')

  return classes.join(' ')
})
const itemIconClasses = computed(() => {
  if(isNested.value) return ''

  return 'w-6'
})
const buttonClasses = computed(() => {
  if(isNested.value) return ''
  if(navItemClass && navItemClass.value !== undefined) return navItemClass.value
  if(buttonClassInjected.value !== undefined) return buttonClassInjected.value
  if(props.buttonClass) return props.buttonClass

  return 'items-center gap-2 p-2 text-secondary'
})

const registerMenuItem = (menuItem) => { menuItems.value.push(menuItem) }

onMounted(() => {
  if(!isNested.value && registerNavItem !== undefined) {
    registerNavItem({ label: props.label, icon: props.icon, menuItems: menuItems.value })
  }
})

provide( 'isNested', computed(() => true) )
provide('registerMenuItem', registerMenuItem)

</script>

<script>
export default {
  name: "AisMenu"
}
</script>