<script setup lang="ts">
import { useCurrentCourseSession } from "@/composables";
import { useCockpitStore } from "@/stores/cockpit";
import { useCompetenceStore } from "@/stores/competence";
import { useLearningPathStore } from "@/stores/learningPath";
import { useUserStore } from "@/stores/user";
import * as log from "loglevel";
import { onMounted } from "vue";

log.debug("CockpitParentPage created");

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

const cockpitStore = useCockpitStore();
const competenceStore = useCompetenceStore();
const learningPathStore = useLearningPathStore();
const courseSession = useCurrentCourseSession();

onMounted(async () => {
  log.debug("CockpitParentPage mounted", props.courseSlug);

  try {
    await cockpitStore.loadCourseSessionUsers(courseSession.value.id);
    cockpitStore.courseSessionUsers?.forEach((csu) => {
      competenceStore.loadCompetenceProfilePage(
        props.courseSlug + "-competence",
        csu.user_id
      );

      learningPathStore.loadLearningPath(props.courseSlug + "-lp", csu.user_id);
    });
    learningPathStore.loadLearningPath(props.courseSlug + "-lp", useUserStore().id);
  } catch (error) {
    log.error(error);
  }
});
</script>

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

<style scoped></style>
