<template>
  <template v-if="auth">
    <AisLink v-if="!user" :href="signInUrl" class="text-center text-secondary no-underline hover:no-underline">Sign In</AisLink>

    <AisNav v-else class="gap-4 justify-center"
            nav-items-class="top-[50px]"
            item-class="p-2 text-secondary hover:no-underline">
      <AisMenu button-as="span"
               :label="hawkId"
               icon="user"
               arrow-icon="caret-down"
               right
      >
        <template #button="{ open, active}">
          <AisItemLabel class="menu-button leading-[50px] px-4 h-full items-center space-x-2 text-secondary"
                        :label="hawkId"
                        :class="[open ? 'caret-up' : 'caret-down']"
                        label-class="hidden md:inline-block"
                        arrow-class="hidden md:inline-block"
                        icon="user"
                        :arrow-icon="open ? 'caret-up' : 'caret-down'"
          ></AisItemLabel>
        </template>

        <!-- For mobile only: Displays the Hawk ID at the top of the menu, since Hawk ID is hidden on the button in mobile -->
        <AisMenuItem class="md:hidden bg-primary text-lg text-center uppercase m-1.5 rounded">{{hawkId}}</AisMenuItem>

        <slot name="default">
          <template v-for="item in userMenuItems" :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, itemClass]"
                          :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"
            ></AisMenu>

            <AisMenuItem v-else
                         :as="item.as"
                         :label="item.label"
                         :to="item.to"
                         :href="item.href"
                         :disabled="item.disabled"
                         :icon="item.icon"
            ></AisMenuItem>
          </template>
        </slot>

        <AisMenuItem label="Sign Out" :icon="faSignOutAlt" @click="handleLogoutClick"/>
      </AisMenu>
    </AisNav>
  </template>
</template>


<script setup>
  import { computed, onMounted, ref } from "vue"
  import AisNav from "@/components/nav/AisNav.vue";
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";
  import AisMenuGroup from "@/components/menu/AisMenuGroup.vue";
  import AisMenuDivider from "@/components/menu/AisMenuDivider.vue";
  import AisItemLabel from "@/components/item-label/AisItemLabel.vue";
  import AisLink from "@/components/link/AisLink.vue";
  import { userMenuProps, getHawkId } from "@/components/brand-bar/user-menu";
  import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add( faSignOutAlt )

  const emit = defineEmits(['logout'])

  const loginUrlBase = ref('https://login.uiowa.edu/uip/login.page?service=')
  const signInUrl = ref('')

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

  const hawkId = computed(() => getHawkId(props.user))

  const handleLogoutClick = (e) => { emit('logout', props.user) }

onMounted(() => {
  // console.log(`menu.mounted: url=[${document.querySelector('a.site-link')?.href}]`)
  signInUrl.value = loginUrlBase.value + document.querySelector('.site-name a.site-link')?.href
})

</script>

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