<script setup lang="ts">
import * as log from "loglevel";
import { computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { VV_COURSE_IDS } from "@/constants";
import { useCurrentCourseSession } from "@/composables";

log.debug("CompetenceParentPage created");

const props = defineProps<{
  courseSlug: string;
}>();

const route = useRoute();

function routeInOverview() {
  return route.path.endsWith("/competence");
}

function routeInCompetenceCertificate() {
  return route.path.includes("/certificate");
}

function routeInActionCompetences() {
  return route.path.endsWith("/competences");
}

function routeInSelfEvaluationAndFeedback() {
  return route.path.endsWith("/self-evaluation-and-feedback");
}

// FIXME 22.02.24: To-be-tackled NEXT in a separate PR (shippable member comp.navi)
//  -> Do not use the VV_COURSE_ID anymore (discuss with @chrigu) -> We do this next.
const currentCourseSession = useCurrentCourseSession();
const isVVCourse = computed(() => {
  return VV_COURSE_IDS.includes(currentCourseSession.value.course.id);
});

onMounted(async () => {
  log.debug("CompetenceParentPage mounted", props.courseSlug);
});
</script>

<template>
  <div class="bg-gray-200">
    <nav class="border-b bg-white px-4 lg:px-8">
      <ul class="flex flex-col lg:flex-row">
        <li
          class="border-t-2 border-t-transparent"
          :class="{ 'border-b-2 border-b-blue-900': routeInOverview() }"
        >
          <router-link :to="`/course/${courseSlug}/competence`" class="block py-3">
            {{ $t("a.Übersicht") }}
          </router-link>
        </li>
        <li
          v-if="!isVVCourse"
          class="border-t-2 border-t-transparent lg:ml-12"
          :class="{ 'border-b-2 border-b-blue-900': routeInCompetenceCertificate() }"
        >
          <router-link
            :to="`/course/${courseSlug}/competence/certificates`"
            class="block py-3"
          >
            {{ $t("a.Kompetenznachweise") }}
          </router-link>
        </li>
        <li
          class="border-t-2 border-t-transparent lg:ml-12"
          :class="{
            'border-b-2 border-b-blue-900': routeInSelfEvaluationAndFeedback(),
          }"
        >
          <router-link
            :to="`/course/${courseSlug}/competence/self-evaluation-and-feedback`"
            class="block py-3"
          >
            {{
              isVVCourse
                ? $t("a.Selbst- und Fremdeinschätzungen")
                : $t("a.Selbsteinschätzungen")
            }}
          </router-link>
        </li>
        <li
          class="border-t-2 border-t-transparent lg:ml-12"
          :class="{ 'border-b-2 border-b-blue-900': routeInActionCompetences() }"
        >
          <router-link
            :to="`/course/${courseSlug}/competence/competences`"
            class="block py-3"
          >
            {{ $t("a.Handlungskompetenzen") }}
          </router-link>
        </li>

        <!-- Add similar logic for other `li` items as you expand the list -->
        <li class="ml-6 inline-block lg:ml-12"></li>
      </ul>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<style scoped></style>
