<template>
  <header class="header">
    <div class="responsive beta">
      <beta-text />
    </div>
    <nav class="nav">
      <div class="wrapper-logo desktop">
        <Link
          :image="{ url: 'logo.jpeg', alt: $t('general.header.alt_logo') }"
          :text="title($t('general.header.title'))"
          :route="{ name: 'home' }"
        />
      </div>
      <div class="wrapper-logo responsive">
        <Link
          :image="{
            url: 'logo.jpeg',
            alt: $t('general.header.alt_logo')
          }"
          :route="{ name: 'home' }"
        />
      </div>
      <div ref="list" class="wrapper-entries">
        <ul
          v-if="isLogged && authEnabled"
          :class="['nav-list', { 'menu-open': !menuIsClosed }]"
        >
          <li class="logged-link">
            <Link
              :text="$t('general.header.sequences_text')"
              icon="bi bi-images"
              :route="{ name: 'my-sequences' }"
              @click.native="closeModal"
            />
          </li>
          <li v-if="userProfileUrl.length" class="logged-link">
            <Link
              :route="{ name: 'my-information' }"
              icon="bi bi-person"
              :text="$t('general.header.my_information_text')"
              @click.native="closeModal"
            />
          </li>
          <li class="logged-link">
            <Link
              :route="{ name: 'my-settings' }"
              icon="bi bi-gear"
              :text="$t('general.header.my_settings_text')"
              @click.native="closeModal"
            />
          </li>
          <li class="logged-link">
            <Link
              type="external"
              icon="bi bi-power"
              :text="$t('general.header.logout_text')"
              :path-external="getAuthRoute('auth/logout', route.path)"
              @click.native="closeModal"
            />
          </li>
        </ul>
        <div class="wrapper-right-entries">
          <div v-if="isLogged && authEnabled">
            <Link
              :text="$t('general.header.upload_text')"
              look="button button--blue"
              :route="{ name: 'upload-pictures' }"
              @click.native="closeModal"
            />
          </div>
          <div>
            <Link
              :text="$t('general.header.contribute_text')"
              :route="{ name: 'share-pictures' }"
              @click.native="closeModal"
            />
          </div>
          <button
            v-if="isLogged && authEnabled"
            class="menu-burger"
            :aria-label="ariaLabel"
            @click="toggleMenu"
          >
            <div v-if="isLogged" class="item-with-sub">
              <span>{{ userName }}</span>
            </div>
            <div v-else>
              <i v-if="!menuIsClosed" class="cross bi bi-x-lg"></i>
              <i v-else class="bi bi-list"></i>
            </div>
          </button>
          <div v-else-if="!isLogged && authEnabled">
            <Link
              type="external"
              icon="bi bi-person-circle"
              :path-external="getAuthRoute('auth/login', route.path)"
            />
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { useCookies } from 'vue3-cookies'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getAuthRoute } from '@/utils/auth'
import { title } from '@/utils/index'
import Link from '@/components/Link.vue'
import BetaText from '@/components/BetaText.vue'

const { cookies } = useCookies()
const { t } = useI18n()
const route = useRoute()
defineProps({
  authEnabled: { type: Boolean, default: true },
  userProfileUrl: { type: String, default: '' }
})
const list = ref(null)
let menuIsClosed = ref<boolean>(true)

onClickOutside(list, () => closeModal())

function closeModal() {
  menuIsClosed.value = true
}

function toggleMenu(): void {
  menuIsClosed.value = !menuIsClosed.value
}
const isLogged = computed((): boolean => !!cookies.get('user_id'))
const ariaLabel = computed((): string =>
  menuIsClosed.value
    ? t('general.header.burger_menu_aria_label_open')
    : t('general.header.burger_menu_aria_label_closed')
)
const userName = computed((): string =>
  cookies!
    .get('user_name')
    .match(/\b(\w)/g)!
    .join('')
    .toUpperCase()
)
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  height: toRem(8);
  background-color: var(--blue-pale);
}
.nav {
  width: 100%;
  padding-right: toRem(2);
  padding-left: toRem(2);
  display: flex;
  justify-content: space-between;
}
.wrapper-logo {
  display: flex;
  align-items: center;
  height: toRem(4);
}
.wrapper-entries {
  display: flex;
}
.responsive {
  display: none;
}
.desktop {
  display: block;
}
.wrapper-logo p {
  @include text(m-r-regular);
  margin-bottom: 0;
  margin-left: toRem(1);
  position: relative;
}
.item-with-sub {
  position: relative;
  display: flex;
  align-items: center;
}
.item-with-sub:hover .sub-nav-block {
  display: block;
}
.sub-nav-block {
  display: none;
  border-radius: toRem(0.5);
  border: toRem(0.1) solid var(--black);
  background-color: var(--white);
  position: absolute;
  right: 0;
  top: toRem(3.5);
  z-index: 1;
  width: toRem(15);
}
.logged-link {
  display: flex;
  padding: toRem(0.5) toRem(2) toRem(0.7);
}
.logged-link:hover {
  border-radius: toRem(0.5);
  background-color: var(--grey);
}
.nav-list-item {
  margin-right: toRem(1.5);
}
.wrapper-right-entries {
  display: flex;
  align-items: center;
  div {
    margin-right: toRem(2);
  }
}
.cross {
  font-size: toRem(2);
}
.item-with-sub {
  margin-right: toRem(1.5);
}
.nav {
  align-items: center;
  padding: toRem(1.5);
}
.nav-list {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: initial;
  position: absolute;
  width: toRem(20);
  top: toRem(8);
  right: 0;
  z-index: 2;
  background-color: var(--white);
  box-shadow: 0 toRem(0.2) toRem(0.4) rgb(0 0 0 / 10%);
  padding-left: 0;
  padding-top: toRem(1);
  padding-bottom: toRem(1);
  border-radius: toRem(1);
}
.menu-burger {
  display: block;
  background-color: transparent;
  border: none;
  width: toRem(2.5);
  font-size: toRem(2.5);
  padding: 0;
  .item-with-sub {
    @include text(s-regular);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--blue);
    color: var(--white);
    height: toRem(3);
    width: toRem(3);
    border-radius: 50%;
    margin-right: 0;
  }
}
.menu-open {
  display: flex;
}
@media (max-width: toRem(50)) {
  .header {
    flex-direction: column;
    height: toRem(11);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
  }
  .nav-list {
    top: toRem(11);
    width: 100%;
  }
  .desktop {
    display: none;
  }
  .responsive {
    display: flex;
  }
  .beta {
    width: 100%;
    .instance-beta {
      width: 100%;
    }
  }
}
</style>
