<script setup lang="ts">
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useNavigationAttributes } from "@/utils/navigation";
import { useRouteLookups } from "@/utils/route";
import { getMediaCenterUrl } from "@/utils/utils";
import log from "loglevel";
import { computed, onMounted } from "vue";
import CourseSessionNavigation from "./CourseSessionNavigation.vue";
import DefaultNavigation from "./DefaultNavigation.vue";
import MobileMenuButton from "./MobileMenuButton.vue";
import NotificationButton from "./NotificationButton.vue";
import ProfileMenuButton from "./ProfileMenuButton.vue";

log.debug("MainNavigationBar created");

const courseSessionsStore = useCourseSessionsStore();
const { inMediaLibrary, inAppointments } = useRouteLookups();
const { hasMediaLibraryMenu, hasAppointmentsMenu, hasSessionTitle } =
  useNavigationAttributes();

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");
});
</script>

<template>
  <nav class="bg-blue-900 text-white">
    <div class="mx-auto px-4 lg:px-8">
      <div class="relative flex h-16 justify-between">
        <MobileMenuButton />
        <div class="flex flex-1 items-stretch justify-start">
          <DefaultNavigation />

          <!-- Satisfy the type checker; these menu items are
              only relevant if there is a current course session -->
          <CourseSessionNavigation />
        </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 -->
          <NotificationButton />

          <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">
            <ProfileMenuButton />
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<style lang="postcss"></style>
