<template>
  <div class="flex" :class="navClasses">
    <slot>
      <template v-for="item in items" :key="item.key">
        <AisMenu v-if="item.children"
                 :label="item.label"
                 :items="item.children"
                 :icon="item.icon"
                 :button-class="itemClasses"
                 :right="right"
                 :dark="dark"
        ></AisMenu>

        <AisNavItem v-else
                    :label="item.label"
                    :href="item.href"
                    :to="item.to"
                    :icon="item.icon"
        ></AisNavItem>
      </template>
    </slot>
  </div>

</template>


<script setup>
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisNavItem from "@/components/nav/AisNavItem.vue";
  import { computed, inject, onMounted, provide, ref } from "vue";
  import {classToArray} from "@/util/class-util";

  /*  These are provided by the AisHeader to ensure consistency in navbar behavior within the AisHeader. AisNavbars
      created elsewhere will not have these restrictions.
   */
  const navClass = inject('navClass', '')
  const navMenuClass = inject('navMenuClass', '')
  const navItemClass = inject('navItemClass', '')
  const registerNav = inject('registerNav', undefined)

  const navItems = ref([])

  const props = defineProps({
    items: { type: Array, default: () => [] },
    itemClass: { type: [String, Array], default: () => '' },
    menuClass: { type: [String, Array], default: () => '' },
    right: { type: Boolean, default: () => false },
    dark: { type: Boolean, default: () => false },
    order: { type: Number, default: () => 0 }, // for determining display order of multiple navs in mobile menu

    /* This provides a way to style the top-level menu dropdown container for menus that are in the navbar.
     * These classes won't get provided down to nested menus.
     */
    navItemsClass: { type: String, default: () => '' },
  })

  const navClasses = computed(() => {
    if(navClass && navClass.value !== undefined) return navClass.value
    if(props.dark) return 'bg-secondary'

    return ''
  })

  const itemClasses = computed(() => {
    if(navItemClass && navItemClass.value !== undefined) return navItemClass.value
    const classes = ['gap-2', 'p-2']

    if(props.dark)
      classes.push('text-white')
    else
      classes.push('text-secondary')

    if(props.itemClass)
      classes.push(...classToArray(props.itemClass))

    return classes.join(' ')
  })
  const menuClasses = computed(() => {
    if(navMenuClass && navMenuClass.value !== undefined) return navMenuClass.value
    if(props.menuClass) return props.menuClass

    return 'hover'
  })

  const navMenuProvider = computed(() => props.navItemsClass ? props.navItemsClass : 'mt-0.5')

  const registerNavItem = (navItem) => { navItems.value.push(navItem) }

  onMounted(() => {
    if(registerNav !== undefined) {
      registerNav({ order: props.order, navItems: navItems.value })
    }
  })

  provide( 'itemClass', computed(() => itemClasses.value) )
  provide( 'buttonClass', computed(() => itemClasses.value) )
  provide( 'navMenuClass', computed(() => menuClasses.value) )
  provide( 'navIsDark', computed(() => props.dark) )
  provide( 'navMargin', computed(() => navMenuProvider.value) )
  provide('registerNavItem', registerNavItem)

</script>

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