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

log.debug("MainNavigationBar created");

const breakpoints = useBreakpoints(breakpointsTailwind);
const userStore = useUserStore();
const courseSessionsStore = useCourseSessionsStore();
const notificationsStore = useNotificationsStore();
const {
  inCockpit,
  inCompetenceProfile,
  inLearningMentor,
  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 `/dashboard/due-dates?session=${currentCourseSession.id}`;
  } else {
    return `/dashboard/due-dates`;
  }
});

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

const hasLearningPathMenu = computed(() =>
  Boolean(
    courseSessionsStore.currentCourseSession?.actions.includes("learning-path") &&
      inCourse()
  )
);

const hasCompetenceNaviMenu = computed(() =>
  Boolean(
    courseSessionsStore.currentCourseSession?.actions.includes("competence-navi") &&
      inCourse()
  )
);

const hasMediaLibraryMenu = computed(() =>
  Boolean(
    courseSessionsStore.currentCourseSession?.actions.includes("media-library") &&
      inCourse()
  )
);

const hasCockpitMenu = computed(
  () =>
    Boolean(
      courseSessionsStore.currentCourseSession?.actions.includes("expert-cockpit")
    ) && inCourse()
);

const hasPreviewMenu = computed(
  () =>
    Boolean(courseSessionsStore.currentCourseSession?.actions.includes("preview")) &&
    inCourse()
);

const hasAppointmentsMenu = computed(() =>
  Boolean(
    courseSessionsStore.currentCourseSession?.actions.includes("appointments") &&
      userStore.loggedIn &&
      inCourse()
  )
);

const hasNotificationsMenu = computed(() => {
  return userStore.loggedIn;
});

const hasLearningMentor = computed(() => {
  if (!inCourse()) {
    return false;
  }

  if (!courseSessionsStore.currentCourseSession) {
    return false;
  }

  const courseSession = courseSessionsStore.currentCourseSession;
  return courseSession.actions.includes("learning-mentor");
});

const mentorTabTitle = computed(() =>
  courseSessionsStore.currentCourseSession?.course.configuration.is_uk
    ? "a.Praxisbildner"
    : "a.Lernbegleitung"
);

const hasSessionTitle = computed(() => {
  return courseSessionsStore.currentCourseSession?.title && inCourse();
});
</script>

<template>
  <CoursePreviewBar v-if="courseSessionsStore.isCourseSessionPreviewActive" />
  <div v-else>
    <Teleport to="body">
      <MobileMenu
        v-if="userStore.loggedIn"
        :show="state.showMobileNavigationMenu"
        :course-session="courseSessionsStore.currentCourseSession"
        :has-media-library-menu="hasMediaLibraryMenu"
        :has-cockpit-menu="hasCockpitMenu"
        :has-preview-menu="hasPreviewMenu"
        :has-learning-path-menu="hasLearningPathMenu"
        :has-competence-navi-menu="hasCompetenceNaviMenu"
        :has-learning-mentor="hasLearningMentor"
        :has-notifications-menu="hasNotificationsMenu"
        :has-appointments-menu="hasAppointmentsMenu"
        :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 @close="state.showMobileProfileMenu = false" />
      </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">
                  <router-link
                    v-if="hasCockpitMenu"
                    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
                    v-if="hasPreviewMenu"
                    data-cy="navigation-preview-link"
                    :to="
                      getLearningPathUrl(
                        courseSessionsStore.currentCourseSession.course.slug
                      )
                    "
                    target="_blank"
                    class="nav-item"
                  >
                    <div class="flex items-center">
                      <span>{{ t("a.Vorschau Teilnehmer") }}</span>
                      <it-icon-external-link class="ml-2" />
                    </div>
                  </router-link>
                  <router-link
                    v-if="hasLearningPathMenu"
                    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
                    v-if="hasCompetenceNaviMenu"
                    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>

                  <router-link
                    v-if="hasLearningMentor"
                    data-cy="navigation-learning-mentor-link"
                    :to="
                      getLearningMentorUrl(
                        courseSessionsStore.currentCourseSession.course.slug
                      )
                    "
                    class="nav-item"
                    :class="{ 'nav-item--active': inLearningMentor() }"
                  >
                    {{ t(mentorTabTitle) }}
                  </router-link>
                </div>
              </template>
            </div>

            <div class="flex items-stretch justify-start space-x-8">
              <router-link
                v-if="hasMediaLibraryMenu"
                :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="hasAppointmentsMenu"
                :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="hasNotificationsMenu" 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="hasSessionTitle"
                class="nav-item hidden items-center lg:inline-flex"
              >
                <div class="" data-cy="current-course-session-title">
                  {{ selectedCourseSessionTitle }}
                </div>
              </div>

              <div class="nav-item">
                <div
                  v-if="userStore.loggedIn"
                  class="flex items-center"
                  data-cy="header-profile"
                >
                  <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
                      v-slot="{ close }"
                      class="absolute -right-2 top-8 z-50 w-[500px] bg-white shadow-lg"
                    >
                      <div class="p-4">
                        <AccountMenu @close="close" />
                      </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>
