<script setup lang="ts">
import SubNavigation from "@/components/header/SubNavigation.vue";
import { useCurrentCourseSession } from "@/composables";
import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
import { ATTENDANCE_ROUTE, COCKPIT_ROUTE, DOCUMENTS_ROUTE } from "@/router/names";
import { useTranslation } from "i18next-vue";
import log from "loglevel";
import { computed } from "vue";

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

log.debug("CockpitIndexPage created", props.courseSlug);

const { loading } = useExpertCockpitPageData(props.courseSlug);

const defaultRoute = {
  name: COCKPIT_ROUTE,
};
const attendanceRoute = {
  name: ATTENDANCE_ROUTE,
};
const documentsRoute = {
  name: DOCUMENTS_ROUTE,
};

const { t } = useTranslation();

const courseSession = useCurrentCourseSession();

const enableDocuments = computed(() => {
  return !!courseSession.value.course.configuration.enable_circle_documents;
});

const items = computed(() => [
  { id: 1, name: t("a.Übersicht"), route: defaultRoute },
  { id: 2, name: t("a.Teilnehmer"), route: attendanceRoute },
  ...(enableDocuments.value
    ? [
        {
          id: 3,
          name: t("a.Unterlagen"),
          route: documentsRoute,
          dataCy: "circle-documents",
        },
      ]
    : []),

  {
    id: 4,
    name: "Vorschau Teilnehmer",
    route: "https://iterativ.ch",
  },
  {
    id: 5,
    name: "MS Teams",
    route: "https://vbvbern.sharepoint.com/sites/myVBV-AFA_K-CI",
  },
]);
</script>

<template>
  <div v-if="!loading" class="bg-gray-200">
    <SubNavigation :items="items" />
    <router-view />
  </div>
</template>

<style scoped></style>
