<template>
  <div
    v-if="data"
    ref="userRef"
    :class="{'--open': isMenuShow}"
    class="layout-header-user"
  >
    <button
      :title="$t('show_menu')"
      type="button"
      class="layout-header-user__trigger"
      @click="showMenu"
    >
      <UiAvatar :size="36" />
      <UiIcon
        class="layout-header-user__trigger-icon"
        name="angle-down"
        size="16"
      />
    </button>
    <transition mode="out-in">
      <div
        v-if="isMenuShow"
        class="layout-header-user__dropdown"
      >
        <NuxtLink
          :to="generateLink('/user/profile')"
          class="layout-header-user__profile"
        >
          <UiAvatar
            :size="48"
            class="layout-header-user__profile-avatar"
          />
          <div class="layout-header-user__profile-wrapper">
            <span class="layout-header-user__profile-title">{{ data.username }}</span>
            <span class="layout-header-user__profile-text">{{ $t('my_profile') }}</span>
          </div>
        </NuxtLink>
        <div class="layout-header-user__links">
          <div
            v-for="(group, groupIndex) in groupsCount"
            :key="`group-profile-${groupIndex}`"
            class="layout-header-user__links-wrapper"
          >
            <template
              v-for="(item, index) in profileNavigationItems.filter(item => item.group === group)"
              :key="`profile-link-${index}`"
            >
              <component
                :is="component(hasChild(item))"
                :class="[
                  {'--has-child' : hasChild(item)},
                  {'--open' : isChildsShow}
                ]"
                :to="hasChild(item) ? null : generateLink(item.value)"
                class="layout-header-user__item"
                @click="hasChild(item) ? openChilds() : null"
              >
                <UiIcon
                  :name="item.icon"
                  class="layout-header-user__item-icon"
                  size="20"
                />
                {{ $t(item.title) }}
                <UiIcon
                  v-if="hasChild(item)"
                  class="layout-header-user__angle"
                  name="angle-down"
                  size="16"
                />
              </component>
              <template v-if="hasChild(item) && isChildsShow">
                <NuxtLink
                  v-for="(child, childIndex) in item.childs"
                  :key="`profile-link-${index}-${childIndex}`"
                  :to="generateLink(child.value)"
                  class="layout-header-user__item --child"
                >
                  <UiIcon
                    :name="child.icon"
                    class="layout-header-user__item-icon"
                    size="16"
                  />
                  {{ $t(child.title) }}
                </NuxtLink>
              </template>
            </template>

            <button
              v-if="group === groupsCount"
              type="button"
              class="layout-header-user__item"
              @click="logOut"
            >
              <UiIcon
                name="logout"
                class="layout-header-user__item-icon"
                size="20"
              />
              {{ $t('log_out') }}
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { onClickOutside } from '@vueuse/core';
import { AuthorizationApiService } from '../../services/api/authorization.service';
import { profileNavigationItems } from '../../lib';
import type { IProfileData } from '../../types';

const userRef = ref<HTMLElement>();
const isMenuShow = ref(false);
const isChildsShow = ref(false);

const data = computed(() => useState<IProfileData>('profileData').value);

onClickOutside(userRef, () => {
  isMenuShow.value = false;
});

const router = useRouter();
router.afterEach(() => {
  isMenuShow.value = false;
});

const { generateLink } = useGenerateLink();

function logOut() {
  useUser(AuthorizationApiService).signOut();
}

function showMenu() {
  isMenuShow.value = !isMenuShow.value;
}

const groupsCount = computed(() => new Set(profileNavigationItems.map(item => item.group)).size);

function component(hasChild: boolean | undefined) {
  if (hasChild) {
    return 'button';
  }
  return resolveComponent('NuxtLink');
}

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

function openChilds() {
  isChildsShow.value = !isChildsShow.value;
}
</script>

<style lang="scss">
@include from-br(sm) {
  .layout-header-user {
    position: relative;
  }

  .layout-header-user__trigger {
    display: flex;
    flex-wrap: nowrap;
    column-gap: 8px;
    align-items: center;
  }

  .layout-header-user__trigger-icon {
    color: $header-user-trigger-icon;
  }

  .layout-header-user .layout-header-user__trigger-icon {
    transition: var(--transition) transform;
  }

  .layout-header-user.--open .layout-header-user__trigger-icon {
    transform: rotate(180deg);
  }

  .layout-header-user__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    border-radius: $radius-xl;
    background-color: $header-user-dropdown-bg;
    border: 1px solid $header-user-dropdown-border;
    width: 254px;
    overflow: hidden;
  }

  .layout-header-user__profile {
    display: grid;
    padding: 16px;
    column-gap: 12px;
    align-items: center;
    border-bottom: 1px solid $header-user-profile-border;
    grid-template-columns: 48px 1fr;

    @include hover(background-color) {
      background-color: $header-user-profile-bg--hover;
    }
  }

  .layout-header-user__profile-wrapper {
    display: grid;
  }

  .layout-header-user__profile-text {
    @include font-sm;

    color: $header-user-profile-text;
  }

  .layout-header-user__profile-title {
    @include font-base;

    font-weight: 600;
    color: $header-user-profile-title;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .layout-header-user__links {
    display: grid;
  }

  .layout-header-user__item {
    @include font-sm;

    display: grid;
    grid-template-columns: 20px 1fr;
    place-items: center start;
    padding: 10px 16px;
    color: $header-user-item-text;
    column-gap: 12px;
    width: 100%;
    text-transform: capitalize;

    @include hover(background-color) {
      background-color: $header-user-item-bg--hover;
    }
  }

  .layout-header-user__item.--child {
    padding: 8px 16px 8px 32px;
  }

  .layout-header-user__angle {
    transition: var(--transition) transform;
  }

  .layout-header-user__item.--open .layout-header-user__angle {
    transform: rotate(180deg);
  }

  .layout-header-user__item.--has-child {
    grid-template-columns: 20px 1fr 20px;
  }

  .layout-header-user__links-wrapper {
    padding-block: 8px;
  }

  .layout-header-user__links-wrapper:not(:last-child) {
    border-bottom: 1px solid $header-user-links-border;
  }

  .layout-header-user__item-icon {
    color: $header-user-item-icon;
  }

  .layout-header-user__profile-avatar.ui-avatar {
    @include font-xl;
  }
}
</style>
