<script setup lang="ts">
import type { NavbarItem, NavbarItemDropdown, NavbarItemMegamenu, NavbarItemAction } from './navbar.types'
import { useNavbarLayoutContext } from './navbar.context'

const props = defineProps<{
  link: NavbarItem
}>()

const { activeMobileSubsidebarId, toggleMobileSubnav } = useNavbarLayoutContext()
</script>

<template>
  <li>
    <a
      v-if="props.link.type === 'dropdown'"
      :class="[activeMobileSubsidebarId === props.link.id && 'is-active']"
      tabindex="0"
      role="button"
      @keydown.enter.prevent="toggleMobileSubnav((props.link as NavbarItemDropdown).id)"
      @click="toggleMobileSubnav((props.link as NavbarItemDropdown).id)"
    >
      <VIcon
        :icon="props.link.icon"
      />
      <span v-if="props.link.label">{{ props.link.label }}</span>
    </a>
    <a
      v-if="props.link.type === 'megamenu'"
      :class="[activeMobileSubsidebarId === props.link.id && 'is-active']"
      tabindex="0"
      role="button"
      @keydown.enter.prevent="toggleMobileSubnav((props.link as NavbarItemMegamenu).id)"
      @click="toggleMobileSubnav((props.link as NavbarItemMegamenu).id)"
    >
      <VIcon
        :icon="props.link.icon"
      />
      <span v-if="props.link.label">{{ props.link.label }}</span>
    </a>
    <a
      v-else-if="props.link.type === 'action'"
      tabindex="0"
      role="button"
      @keydown.enter.prevent="(props.link as NavbarItemAction).onClick"
      @click="(props.link as NavbarItemAction).onClick"
    >
      <VIcon
        :icon="props.link.icon"
      />
      <span v-if="props.link.label">{{ props.link.label }}</span>
    </a>
    <VLink
      v-else-if="props.link.type === 'link'"
      :to="props.link.to"
    >
      <VIcon
        :icon="props.link.icon"
      />
      <span v-if="props.link.label">{{ props.link.label }}</span>
    </VLink>
  </li>
</template>

<style lang="scss" scoped>
li {
  width:120px !important;
  span {
    color: var(--modal-text) !important;
    padding-left: 10px;
  }
  .iconify {
    transform: translateY(5px);
  }
}
</style>
