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

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

log.debug('MainNavigationBar.vue created');

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

function toggleNav() {
  console.log(state.showMenu);
  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 '/';
}

</script>

<template>
  <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
        :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="userStore.loggedIn && !inLearningPath()"
          to="/"
          class="nav-item"
          :class="{'nav-item--active': route.path === '/'}"
        >
          Cockpit
        </router-link>
        <router-link
          v-if="userStore.loggedIn && !inLearningPath()"
          to="/shop"
          class="nav-item"
          :class="{'nav-item--active': menuActive('/shop')}"
        >
          Shop
        </router-link>

        <router-link
          v-if="userStore.loggedIn && 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:list-item flex-auto"></div>
        <router-link
          v-if="userStore.loggedIn"
          to="/mediacenter"
          class="nav-item"
          :class="{'nav-item--active': menuActive('/mediacenter')}"
        >
          Mediathek
        </router-link>
        <router-link
          v-if="userStore.loggedIn"
          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>
</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
}
</style>
