<script setup lang="ts">
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useUserStore } from "@/stores/user";
import { useNavigationAttributes } from "@/utils/navigation";
import { getMediaCenterUrl } from "@/utils/utils";
import { ref } from "vue";
import MobileMenu from "./MobileMenu.vue";

const userStore = useUserStore();
const courseSessionsStore = useCourseSessionsStore();

const {
  hasCompetenceNaviMenu,
  hasLearningPathMenu,
  hasMediaLibraryMenu,
  hasCockpitMenu,
  hasPreviewMenu,
  hasAppointmentsMenu,
  hasNotificationsMenu,
  hasLearningMentor,
} = useNavigationAttributes();

const showMenu = ref(false);
</script>

<template>
  <Teleport to="body">
    <MobileMenu
      v-if="userStore.loggedIn"
      :show="showMenu"
      :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="showMenu = false"
      @logout="userStore.handleLogout()"
    />
  </Teleport>
  <div class="inset-y-0 flex items-center lg:hidden">
    <!-- Mobile menu button -->
    <div data-cy="navigation-mobile-menu-button" class="flex" @click="showMenu = 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>
</template>
