<script setup lang="ts">
import SubNavigation, { type SubNavEntry } from "@/components/header/SubNavigation.vue";
import { useCurrentCourseSession, useEvaluationWithFeedback } from "@/composables";
import {
  CERTIFICATES_ROUTE,
  COMPETENCE_ROUTE,
  COMPETENCES_ROUTE,
  SELF_EVALUATION_ROUTE,
} from "@/router/names";
import { useTranslation } from "i18next-vue";
import * as log from "loglevel";
import { onMounted } from "vue";

log.debug("CompetenceParentPage created");

const { t } = useTranslation();

const currentCourseSession = useCurrentCourseSession();
const hasEvaluationFeedback = useEvaluationWithFeedback().hasFeedback;

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

const competenceRoute = {
  name: COMPETENCE_ROUTE,
};
const certificatesRoute = {
  name: CERTIFICATES_ROUTE,
};
const selfEvaluationRoute = {
  name: SELF_EVALUATION_ROUTE,
};
const competencesRoute = {
  name: COMPETENCES_ROUTE,
};

// todo: replace this menu with a real one before going live
const items: SubNavEntry[] = [
  { id: 0, name: t("a.Übersicht"), route: competenceRoute },
  ...(currentCourseSession.value.course.configuration.enable_competence_certificates
    ? [
        {
          id: 1,
          name: t("a.Kompetenznachweise"),
          route: certificatesRoute,
        },
      ]
    : []),
  {
    id: 2,
    name: hasEvaluationFeedback.value
      ? t("a.Selbst- und Fremdeinschätzungen")
      : t("a.Selbsteinschätzungen"),
    dataCy: "self-evaluation-and-feedback-navigation-link",
    route: selfEvaluationRoute,
  },
  { id: 3, name: t("a.Handlungskompetenzen"), route: competencesRoute },

  {
    id: 4,
    name: "MS Teams",
    route: "https://iterativ.ch",
  },
  {
    id: 5,
    name: "Vorschau Teilnehmer",
    route: "https://iterativ.ch",
  },
];
</script>

<template>
  <div class="bg-gray-200">
    <SubNavigation :items="items" />
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<style scoped></style>
