<script setup lang="ts">
import log from "loglevel";
import { getLoginURL } from "@/router/utils";
import AccountMenu from "@/components/header/AccountMenu.vue";
import MobileMenu from "@/components/header/MobileMenu.vue";
import NotificationPopover from "@/components/notifications/NotificationPopover.vue";
import NotificationPopoverContent from "@/components/notifications/NotificationPopoverContent.vue";
import ItFullScreenModal from "@/components/ui/ItFullScreenModal.vue";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useNotificationsStore } from "@/stores/notifications";
import { useUserStore } from "@/stores/user";
import { useRouteLookups } from "@/utils/route";
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
import { computed, onMounted, reactive } from "vue";
import { useTranslation } from "i18next-vue";
import CoursePreviewBar from "@/components/header/CoursePreviewBar.vue";
import {
  getCockpitUrl,
  getCompetenceNaviUrl,
  getLearningPathUrl,
  getMediaCenterUrl,
} from "@/utils/utils";

log.debug("MainNavigationBar created");

const breakpoints = useBreakpoints(breakpointsTailwind);
const userStore = useUserStore();
const courseSessionsStore = useCourseSessionsStore();
const notificationsStore = useNotificationsStore();
const {
  inCockpit,
  inCompetenceProfile,
  inCourse,
  inLearningPath,
  inMediaLibrary,
  inAppointments,
} = useRouteLookups();

const { t } = useTranslation();
const state = reactive({
  showMobileNavigationMenu: false,
  showMobileProfileMenu: false,
});

function popoverClick(event: Event) {
  if (breakpoints.smaller("lg").value) {
    event.preventDefault();
    state.showMobileProfileMenu = true;
  }
}

const selectedCourseSessionTitle = computed(() => {
  return courseSessionsStore.currentCourseSession?.title;
});

const appointmentsUrl = computed(() => {
  const currentCourseSession = courseSessionsStore.currentCourseSession;
  if (currentCourseSession) {
    return `/course/${currentCourseSession.course.slug}/appointments`;
  } else {
    return `/appointments`;
  }
});

onMounted(() => {
  log.debug("MainNavigationBar mounted");
});
</script>

<template>
  <CoursePreviewBar v-if="courseSessionsStore.hasCourseSessionPreview" />
  <div v-else>
    <Teleport to="body">
      <MobileMenu
        v-if="userStore.loggedIn"
        :show="state.showMobileNavigationMenu"
        :course-session="courseSessionsStore.currentCourseSession"
        :media-url="
          getMediaCenterUrl(courseSessionsStore.currentCourseSession?.course?.slug)
        "
        :user="userStore"
        @closemodal="state.showMobileNavigationMenu = false"
        @logout="userStore.handleLogout()"
      />
    </Teleport>
    <Teleport to="body">
      <ItFullScreenModal
        v-if="userStore.loggedIn"
        :show="state.showMobileProfileMenu"
        @closemodal="state.showMobileProfileMenu = false"
      >
        <AccountMenu />
      </ItFullScreenModal>
    </Teleport>
    <Transition name="nav">
      <nav class="bg-blue-900 text-white">
        <div class="mx-auto px-4 lg:px-8">
          <div class="relative flex h-16 justify-between">
            <div class="absolute inset-y-0 left-0 flex items-center lg:hidden">
              <!-- Mobile menu button -->
              <div
                data-cy="navigation-mobile-menu-button"
                class="flex"
                @click="state.showMobileNavigationMenu = true"
              >
                <button
                  type="button"
                  class="h-8 w-8 text-white hover:text-sky-500 focus:text-sky-500 focus:outline-none"
                >
                  <it-icon-menu class="h-8 w-8" />
                </button>
              </div>
            </div>

            <div class="flex flex-1 items-stretch justify-start">
              <div class="hidden flex-shrink-0 items-center lg:flex">
                <div class="flex items-center">
                  <router-link to="/" class="flex">
                    <it-icon-vbv class="-ml-3 -mt-6 mr-3 h-8 w-16" />
                  </router-link>
                  <router-link to="/" class="flex">
                    <div
                      class="ml-1 border-l border-white pl-3 pr-10 text-2xl text-white"
                    >
                      {{ t("general.title") }}
                    </div>
                  </router-link>
                </div>
              </div>

              <!-- Satisfy the type checker; these menu items are
              only relevant if there is a current course session -->
              <template v-if="courseSessionsStore.currentCourseSession">
                <div class="hidden space-x-8 lg:flex">
                  <template v-if="courseSessionsStore.currentCourseSessionHasCockpit">
                    <router-link
                      data-cy="navigation-cockpit-link"
                      :to="
                        getCockpitUrl(
                          courseSessionsStore.currentCourseSession.course.slug
                        )
                      "
                      class="nav-item"
                      :class="{ 'nav-item--active': inCockpit() }"
                    >
                      {{ t("cockpit.title") }}
                    </router-link>

                    <router-link
                      data-cy="navigation-preview-link"
                      :to="
                        getLearningPathUrl(
                          courseSessionsStore.currentCourseSession.course.slug
                        )
                      "
                      target="_blank"
                      class="nav-item"
                    >
                      <div class="flex items-center">
                        <span>{{ t("a.VorschauTeilnehmer") }}</span>
                        <it-icon-external-link class="ml-2" />
                      </div>
                    </router-link>
                  </template>
                  <template v-else>
                    <router-link
                      data-cy="navigation-learning-path-link"
                      :to="
                        getLearningPathUrl(
                          courseSessionsStore.currentCourseSession.course.slug
                        )
                      "
                      class="nav-item"
                      :class="{ 'nav-item--active': inLearningPath() }"
                    >
                      {{ t("general.learningPath") }}
                    </router-link>

                    <router-link
                      data-cy="navigation-competence-profile-link"
                      :to="
                        getCompetenceNaviUrl(
                          courseSessionsStore.currentCourseSession.course.slug
                        )
                      "
                      class="nav-item"
                      :class="{ 'nav-item--active': inCompetenceProfile() }"
                    >
                      {{ t("competences.title") }}
                    </router-link>
                  </template>
                </div>
              </template>
            </div>

            <div class="flex items-stretch justify-start space-x-8">
              <router-link
                v-if="inCourse() && courseSessionsStore.currentCourseSession"
                :to="
                  getMediaCenterUrl(
                    courseSessionsStore.currentCourseSession.course.slug
                  )
                "
                data-cy="medialibrary-link"
                class="nav-item-no-mobile"
                :class="{ 'nav-item--active': inMediaLibrary() }"
              >
                <it-icon-media-library class="h-8 w-8" />
              </router-link>

              <router-link
                v-if="userStore.loggedIn"
                :to="appointmentsUrl"
                data-cy="all-duedates-link"
                class="nav-item"
                :class="{ 'nav-item--active': inAppointments() }"
              >
                <it-icon-calendar-light class="h-8 w-8" />
              </router-link>

              <!-- Notification Bell & Menu -->
              <div v-if="userStore.loggedIn" class="nav-item leading-none">
                <NotificationPopover>
                  <template #toggleButtonContent>
                    <div class="relative h-8 w-8">
                      <div>
                        <it-icon-notification class="h-8 w-8" />
                        <div
                          v-if="notificationsStore.hasUnread"
                          aria-label="unread notifications"
                          class="absolute inset-y-0 right-0 h-1.5 w-1.5 rounded-full bg-sky-500"
                        />
                      </div>
                    </div>
                  </template>
                  <template #popoverContent>
                    <NotificationPopoverContent />
                  </template>
                </NotificationPopover>
              </div>

              <div
                v-if="selectedCourseSessionTitle"
                class="nav-item hidden items-center lg:inline-flex"
              >
                <div class="">
                  {{ selectedCourseSessionTitle }}
                </div>
              </div>

              <div class="nav-item">
                <div v-if="userStore.loggedIn" class="flex items-center">
                  <Popover class="relative">
                    <PopoverButton @click="popoverClick($event)">
                      <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>
                    </PopoverButton>

                    <PopoverPanel
                      class="absolute -right-2 top-8 z-50 w-[500px] bg-white shadow-lg"
                    >
                      <div class="p-4">
                        <AccountMenu />
                      </div>
                    </PopoverPanel>
                  </Popover>
                </div>
                <div v-else>
                  <a class="" :href="getLoginURL({ lang: userStore.language })">
                    Login
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </Transition>
  </div>
</template>

<style lang="postcss" scoped>
.nav-item {
  @apply inline-flex items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500;
}

.nav-item-no-mobile {
  @apply hidden items-center border-b-4 border-transparent px-1 pt-1 text-white hover:text-sky-500 lg:inline-flex;
}

.nav-item--active {
  @apply border-sky-500;
}
</style>
