<script setup lang="ts">
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useNavigationAttributes } from "@/utils/navigation";
import { useRouteLookups } from "@/utils/route";
import {
  getCockpitUrl,
  getCompetenceNaviUrl,
  getLearningMentorUrl,
  getLearningPathUrl,
} from "@/utils/utils";
import { useTranslation } from "i18next-vue";
import { computed } from "vue";
import SelectedCourseSession from "./SelectedCourseSession.vue";

const { t } = useTranslation();
const courseSessionsStore = useCourseSessionsStore();

const { isInCockpit, inCompetenceProfile, inLearningMentor, inLearningPath } =
  useRouteLookups();
const {
  hasCompetenceNaviMenu,
  hasLearningPathMenu,
  hasCockpitMenu,
  hasPreviewMenu,
  hasLearningMentor,
} = useNavigationAttributes();
const mentorTabTitle = computed(() =>
  courseSessionsStore.currentCourseSession?.course.configuration.is_uk
    ? "a.Praxisbildner"
    : "a.Lernbegleitung"
);
</script>
<template>
  <div
    v-if="courseSessionsStore.currentCourseSession"
    class="flex space-x-8 px-2 lg:px-10"
  >
    <SelectedCourseSession />

    <router-link
      v-if="hasCockpitMenu"
      data-cy="navigation-cockpit-link"
      :to="getCockpitUrl(courseSessionsStore.currentCourseSession.course.slug)"
      class="nav-item-no-mobile"
      :class="{ 'nav-item--active': isInCockpit }"
    >
      {{ 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-no-mobile"
    >
      <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-no-mobile"
      :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-no-mobile"
      :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-no-mobile"
      :class="{ 'nav-item--active': inLearningMentor() }"
    >
      {{ t(mentorTabTitle) }}
    </router-link>
  </div>
</template>
