<template>
  <nav class="layout-nav">
    <div
      v-for="(item, index) in items || navigationItems"
      :key="`navigation-item-${index}`"
      class="layout-nav__item"
    >
      <component
        :is="item.link ? SLink : SButton"
        class="layout-nav__link"
        v-bind="item.link ? {
          to: generateLink(item.link),
          ariaCurrent: isCurrent(item.link) ? 'page' : undefined,
          tabindex: isCurrent(item.link) ? -1 : undefined,
        } : {}"
      >
        <UiIcon
          v-if="item.icon"
          :class="{'--accent': item.accent}"
          :name="item.icon"
          class="layout-nav__icon"
          size="16"
        />
        {{ $t(`navigation.${item.title}`) }}
        <UiIcon
          v-if="hasChild(item)"
          class="layout-nav__down"
          size="11"
          name="angle-down"
        />
      </component>
      <div
        v-if="hasChild(item)"
        class="layout-nav__menu"
      >
        <NuxtLink
          v-for="(subItem, subIndex) in item.childs"
          :key="`navigation-subitem-${index}-${subIndex}`"
          :to="generateLink(subItem.link)"
          :aria-current="isCurrent(subItem.link) ? 'page' : undefined"
          :tabindex="isCurrent(subItem.link) ? -1 : undefined"
          class="layout-nav__menu-item"
        >
          <UiIcon
            :name="subItem.icon"
            size="16"
          />
          {{ $t(subItem.title) }}
        </NuxtLink>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { getNavigationItems } from '../../lib';
import type { INavigationItems } from '../../types';

defineProps<{
  items?: INavigationItems[];
}>();

const navigationItems = getNavigationItems();

const { generateLink } = useGenerateLink();
const route = useRoute();

const SLink = resolveComponent('UiLink');
const SButton = resolveComponent('UiBtn');

function hasChild(item) {
  return item.childs && item.childs.length > 0;
}

function isCurrent(link: string) {
  return route.path === generateLink(link);
}
</script>

<style lang="scss">
@include from-br(sm) {
  .layout-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    background-color: $nav-container-bg;
    border-bottom: 1px solid $nav-container-border;
  }

  .layout-nav__item {
    position: relative;
    padding-bottom: 8px;
    margin-bottom: -8px;
  }

  .layout-nav__link {
    background-color: $nav-bg;
    color: $nav-text;
    border-radius: $radius-full;
    border-color: $nav-border;
    font-weight: $nav-font-weight;

    @include hover(background-color) {
      background-color: $nav-bg--hover;
      color: $nav-text--hover;
      border-color: $nav-border--hover;
    }
  }

  .layout-nav__icon {
    color: $nav-icon;
  }

  .layout-nav__icon.--accent {
    color: $nav-icon-accent;
  }

  .layout-nav__link.router-link-active {
    color: $nav-text--active;
    background-color: $nav-bg--active;
    border-color: $nav-border--active;
  }

  .layout-nav__link.router-link-active .layout-nav__icon {
    color: $nav-icon--active;
  }

  .layout-nav__down {
    flex-shrink: 0;
    color: $nav-down-icon;
    transition: var(--transition) transform;
  }

  .layout-nav__menu {
    @include font-sm;

    position: absolute;
    top: 100%;
    left: 0;
    z-index: $z-index-dropdown;
    display: none;
    min-width: 158px;
    background-color: $nav-menu-bg;
    border: 1px solid $dropdown-menu-border;
    border-radius: $radius;
    padding-block: 8px;
    overflow: hidden;
    user-select: none;
  }

  .layout-nav__item:hover .layout-nav__menu {
    display: grid;
  }

  .layout-nav__item:hover .layout-nav__down {
    transform: rotate(180deg);
  }

  .layout-nav__menu-item {
    @include font-sm;

    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 10px;
    padding-inline: 16px;
    color: $dropdown-menu-text;
    white-space: nowrap;
    min-width: max-content;

    @include hover(background-color) {
      background-color: $nav-menu-item-bg--hover;
    }
  }

  .layout-nav__menu-item .ui-icon {
    width: 16px;
    height: 16px;
    color: $nav-menu-item-icon;
  }
}
</style>
