<template>
  <template
    v-for="(item, index) in items"
    :key="`${keyPrefix}-${index}`"
  >
    <NuxtLink
      v-if="!item.childs?.length"
      :to="generateLink(item.link)"
      :aria-current="isCurrent(item.link) ? 'page' : undefined"
      :tabindex="isCurrent(item.link) ? -1 : undefined"
      class="layout-burger-item__link"
      @click="$emit('close')"
    >
      <UiIcon
        v-if="item.icon"
        :name="item.icon"
        :class="{'--accent': item.accent}"
        size="20"
        class="layout-burger-item__icon"
      />
      {{ t(`navigation.${item.title}`) }}
    </NuxtLink>
    <button
      v-else
      class="layout-burger-item__link"
      type="button"
      @click="$emit('toggle', item.title)"
    >
      <UiIcon
        v-if="item.icon"
        :name="item.icon"
        :class="{'--accent': item.accent}"
        size="20"
        class="layout-burger-item__icon"
      />
      {{ t(`navigation.${item.title}`) }}
      <UiIcon
        :class="{'--open': openedChilds === item.title}"
        class="layout-burger-item__angle"
        name="angle-down"
        size="16"
      />
    </button>
    <template v-if="openedChilds === item.title">
      <NuxtLink
        v-for="(child, childIndex) in item.childs"
        :key="`${keyPrefix}-${index}-child-${childIndex}`"
        :to="generateLink(child.link)"
        :aria-current="isCurrent(child.link) ? 'page' : undefined"
        :tabindex="isCurrent(child.link) ? -1 : undefined"
        class="layout-burger-item__link --child"
        @click="$emit('close')"
      >
        <UiIcon
          :name="child.icon"
          size="16"
          class="layout-burger-item__icon"
        />
        {{ t(`navigation.${child.title}`) }}
      </NuxtLink>
    </template>
  </template>
</template>

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

defineProps<{
  items: INavigationItems[]
  keyPrefix: string
  openedChilds: string | null
}>();

defineEmits<{
  (e: 'close'): void
  (e: 'toggle', title: string): void
}>();

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

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

<style lang="scss">
.layout-burger-item__link {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 16px;
  place-items: center start;
  padding: 10px 16px;
  color: $burger-item-text;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.layout-burger-item__link.router-link-active {
  background-color: $burger-item-bg--active;
  border-radius: $radius;
  color: $burger-item-text--active;
}

.layout-burger-item__link.router-link-active .layout-burger-item__icon {
  color: $burger-item-icon--active;
}

.layout-burger-item__icon {
  color: $burger-item-icon;
  flex-shrink: 0;
}

.layout-burger-item__icon.--accent {
  color: $burger-item-accent-icon;
}

.layout-burger-item__link.--child {
  @include font-sm;

  padding-left: 48px;
  color: $burger-item-child-text;
}

.layout-burger-item__angle {
  margin-left: auto;
  transition: transform var(--transition);
}

.layout-burger-item__angle.--open {
  transform: rotate(180deg);
}

.layout-burger-item__link.--child .layout-burger-item__icon {
  color: $burger-item-child-icon;
}
</style>
