<template>
  <div class="ais-brand-bar bg-primary text-black relative block min-h-[50px] box-border">
    <Popover as="template" v-slot="{ open }">
    <nav class="flex justify-start mx-auto max-w-[1536px] box-border md:flex-row border-0">
      <div class="flex flex-col grow bg-secondary text-black box-border w-[calc(100% - 100px)] md:h-[50px] md:flex-row">

        <!-- Iowa Logo -->
        <AisLogo width="w-[119px]" height="h-[70px] md:h-[50px] 2xl:h-[56px]" class="2xl:-mb-1.5"/>

        <!-- Site Name/Link -->
        <div class="site-name flex flex-row items-center bg-primary text-black h-14 box-border md:h-full md:grow md:justify-between 2xl:h-[50px]">
          <PopoverButton as="template">
            <a id="menuToggle"
               role="button"
               title="menu"
               aria-haspopup="true"
               aria-expanded="false"
               class="flex text-center items-center justify-center cursor-pointer md:hidden h-[56px] w-[50px] flex-col box-border"
            >
              <AisIcon icon="menu"/>
            </a>
          </PopoverButton>

          <slot name="sitename">
            <h6 class="m-0 pl-4 font-sans 2xl:pt-1.5 box-border">
              <AisLink class="site-link font-normal text-base md:text-lg items-center"
                       :label="site" :href="href" :to="to"></AisLink>
            </h6>
          </slot>
        </div>
      </div>

      <!-- Right Side -->
      <div class="flex justify-end flex-col bg-secondary box-border md:flex-row md:bg-primary">

        <!-- Search Slot -->
        <div v-if="searchable" class="relative flex flex-col bg-secondary md:bg-primary min-w-[90px]">
          <div class="leading-[70px] md:leading-[50px] md:pr-1 flex justify-center items-center gap-1.5 cursor-pointer ui hover" @click="handleSearchClick">
            <div>
              <AisIcon icon="search" class="text-white md:text-secondary inline-block"/>
            </div>
            <div class="hidden md:inline-block text-secondary">Search</div>
          </div>
        </div>

        <!-- User Menu -->
        <div v-if="auth" class="relative flex flex-col justify-center bg-primary min-w-[90px] text-base h-[56px] md:h-[50px] box-border md:h-full cursor-pointer ui hover">
          <AisUserMenu :auth="auth" :user="user" :login-url="loginUrl" :user-menu-items="userMenuItems" @logout="handleLogout">
            <slot name="userMenuItems"></slot>
          </AisUserMenu>
        </div>
        <div v-else class="md:hidden bg-primary h-[56px]"></div>  <!-- Placeholder for mobile when user menu isn't used -->
      </div>
    </nav>


      <PopoverPanel v-if="registeredNavs && registeredNavs.length > 0" as="nav" class="md:hidden">
        <div class="bg-white border border-gray-300 text-secondary w-full">
          <div v-for="(nav, index) in registeredNavs">
            <div v-for="navItem in nav.navItems">
              <AisMenu v-if="navItem.menuItems"
                       :label="navItem.label"
                       :icon="navItem.icon"
                       :items="navItem.menuItems"
                       class="w-full"
              ></AisMenu>
              <AisNavItem v-else v-bind="navItem"></AisNavItem>
            </div>
            <AisMenuDivider v-if="index === 0"/>
          </div>
        </div>
      </PopoverPanel>
    </Popover>
  </div>
</template>

<script setup>
  import { computed, inject, provide, useSlots } from "vue";
  import AisLogo from "@/components/logo/AisLogo.vue";
  import AisIcon from "@/components/icon/AisIcon.vue";
  import AisLink from "@/components/link/AisLink.vue";
  import AisNavItem from "@/components/nav/AisNavItem.vue";
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuDivider from "@/components/menu/AisMenuDivider.vue";
  import AisUserMenu from "@/components/brand-bar/AisUserMenu.vue";
  import { brandBarProps } from "@/components/brand-bar/brand-bar-props";
  import { getHawkId, userMenuProps} from "@/components/brand-bar/user-menu";
  import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  import {Popover, PopoverButton, PopoverPanel} from "@headlessui/vue";
  library.add( faSignOutAlt )

  const registeredNavs = inject('registeredNavs', [])

  const emit = defineEmits(['search-click', 'logout'])

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

  const hasUserMenu = computed( () => !!useSlots().userMenu || !!props.user)
  const hawkId = computed(() => getHawkId(props.user))

  const handleSearchClick = (e) => { emit('search-click', e) }
  const handleLogout = (e) => { emit('logout', e) }

  provide( 'itemClass', computed(() => 'gap-3 px-3 py-4 text-secondary') )
</script>

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