<template>
  <div class="ais-header bg-white w-full z-40" :class="classes">
    <header>

      <!-- Site Banner Bar -->
      <slot name="banner">
        <AisBanner v-if="banner"
                   :env="banner.env"
                   :context="banner.context"
                   :message="banner.message"
                   :variant="banner.variant"
        ></AisBanner>
      </slot>

      <!-- Brand Bar -->
      <AisBrandBar :site="site" :href="href" :to="to"
                   :searchable="searchable"
                   :auth="auth"
                   :user="user"
                   :login-url="loginUrl"
                   :user-menu-items="userMenuItems"
                   class="z-40"
                   @logout="emit('logout', $event)"
      />

      <!-- Nav Bar -->
      <AisNavbar v-if="hasNavbar" class="hidden md:inline-block">
        <template #default>
          <slot name="default">
            <AisNav v-if="navItems && navItems.length > 0" :items="navItems"></AisNav>
          </slot>
        </template>

        <template #secondaryNav>
          <slot name="secondaryNav">
            <AisNav v-if="secondaryNavItems && secondaryNavItems.length > 0" :items="secondaryNavItems"></AisNav>
          </slot>
        </template>
      </AisNavbar>

    </header>
  </div>
</template>


<script setup>
import {computed, provide, ref, useSlots} from "vue";
  import AisBrandBar from "@/components/brand-bar/AisBrandBar.vue";
  import AisNavbar from "@/components/navbar/AisNavbar.vue";
  import AisNav from "@/components/nav/AisNav.vue";
  import AisBanner from "@/components/banner/AisBanner.vue";
  import { brandBarProps } from "@/components/brand-bar/brand-bar-props";
  import { userMenuProps } from "@/components/brand-bar/user-menu";
  import { headerProps } from "@/components/header/header-props";
  import { navbarProps } from "@/components/navbar/navbar-props";

  const emit = defineEmits(['logout'])

  const props = defineProps({
    ...headerProps,
    ...brandBarProps,
    ...navbarProps,
    ...userMenuProps,
  })

  const slots = useSlots()

  const navs = ref([])

  const classes = computed(() => props.fixed ? 'fixed top-0 shadow' : '')

  const registerNav = (nav) => { navs.value.push(nav) }

  const providedNavs = computed(() => navs.value)

const hasDefault = computed(() => !!slots.default || props.navItems?.length > 0 )
const hasSecondary = computed(() => !!slots.secondaryNav || props.secondaryNavItems?.length > 0 )
const hasNavbar = computed(() => hasDefault.value || hasSecondary.value )

  provide( 'navClass', computed(() => 'px-1 gap-1 xl:gap-2') )
  provide( 'navMenuClass', computed(() => 'md:hover') )
  provide( 'navItemClass', computed(() => 'items-center gap-2 p-3 text-secondary md:hover') )
  provide('registerNav', registerNav)
  provide('registeredNavs', computed(() => providedNavs.value))
</script>

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