<script setup>
import * as log from 'loglevel';

import { onMounted, reactive } from 'vue';
import { useUserStore } from '@/stores/user';
import { useRoute } from 'vue-router';
import { useAppStore } from '@/stores/app';

log.debug('MainNavigationBar created');

const route = useRoute()
const userStore = useUserStore();
const appStore = useAppStore();
const state = reactive({showMenu: false});

function toggleNav() {
  state.showMenu = !state.showMenu;
}

function calcNavigationMobileOpenClasses() {
  return state.showMenu ? ['fixed', 'w-full', 'h-screen'] : [];
}

function menuActive(checkPath) {
  return route.path.startsWith(checkPath);
}

function inLearningPath() {
  return route.path.startsWith('/learningpath/') || route.path.startsWith('/circle/');
}

function backButtonUrl() {
  if (route.path.startsWith('/circle/')) {
    return '/learningpath/versicherungsvermittlerin';
  }
  return '/';
}

onMounted(() => {
  log.debug('MainNavigationBar mounted');
})

</script>

<template>
  <Transition name="nav">
    <div v-if="appStore.showMainNavigationBar" class="navigation bg-blue-900" :class="calcNavigationMobileOpenClasses()">
      <nav
        class="
          px-8
          py-4
          mx-auto
          lg:flex lg:justify-start lg:items-center
        "
      >
        <div class="flex items-center justify-between">
          <router-link
            to="/"
            class="flex">
            <it-icon-vbv class="h-8 w-16 -mt-3 -ml-3"/>
            <div class="
              text-white
              text-2xl
              pr-10
              pl-3
              ml-1
              border-l border-white
            "
            >
              myVBV
            </div>
          </router-link>

          <!-- Mobile menu button -->
          <div @click="toggleNav" class="flex lg:hidden">
            <button
              type="button"
              class="
                w-8
                text-white
                hover:text-sky-500
                focus:outline-none focus:text-sky-500
              "
            >
              <it-icon-menu class="h-8 w-8"/>
            </button>
          </div>
        </div>

        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
        <div
          v-if="appStore.userLoaded && appStore.routingFinished && userStore.loggedIn "
          :class="state.showMenu ? 'flex' : 'hidden'"
          class="
            flex-auto
            flex-col
            mt-8
            space-y-8
            lg:flex lg:space-y-0 lg:flex-row lg:items-center lg:space-x-10 lg:mt-0
          "
        >
          <router-link
            v-if="!inLearningPath()"
            to="/"
            class="nav-item"
            :class="{'nav-item--active': route.path === '/'}"
          >
            Cockpit
          </router-link>
          <router-link
            v-if="!inLearningPath()"
            to="/shop"
            class="nav-item"
            :class="{'nav-item--active': menuActive('/shop')}"
          >
            Shop
          </router-link>

          <router-link
            v-if="inLearningPath()"
            to="/learningpath/versicherungsvermittlerin"
            class="nav-item"
            :class="{'nav-item--active': menuActive('/learningpath/')}"
          >
            Lernpfad
          </router-link>

          <hr class="text-white lg:hidden">
          <div class="hidden lg:block flex-auto"></div>
          <router-link
            to="/mediacenter"
            class="nav-item"
            :class="{'nav-item--active': menuActive('/mediacenter')}"
          >
            Mediathek
          </router-link>
          <router-link
            to="/messages"
            class="nav-item flex flex-row items-center"
          >
            <it-icon-message class="w-8 h-8 mr-2"/>
          </router-link>
          <router-link
            to="/profile"
            class="nav-item flex items-center"
          >
            <div v-if="userStore.loggedIn">
              <div v-if="userStore.avatar_url">
                <img class="inline-block h-8 w-8 rounded-full"
                     :src="userStore.avatar_url"
                     alt=""/>
              </div>
              <div v-else>
                {{ userStore.getFullName }}
              </div>
            </div>
            <div v-else><a class="" href="/login">Login</a></div>
          </router-link>
        </div>
      </nav>
    </div>
  </Transition>
</template>

<style lang="postcss" scoped>
.nav-item {
  @apply text-white hover:text-sky-500 text-2xl font-bold lg:text-base lg:font-normal;
}

.nav-item--active {
  @apply underline underline-offset-[21px] decoration-sky-500 decoration-4
}

.nav-enter-active,
.nav-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-enter-from,
.nav-leave-to {
  opacity: 0;
  transform: translateY(-80px);
}

</style>
