<script setup lang="ts">
import * as log from "loglevel";

import SelfEvaluation from "@/pages/learningPath/selfEvaluationPage/SelfEvaluation.vue";
import { useCircleStore } from "@/stores/circle";
import type { LearningUnit } from "@/types";
import { onMounted, reactive } from "vue";

log.debug("LearningUnitSelfEvaluationView created");

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

const circleStore = useCircleStore();

const state: { learningUnit?: LearningUnit } = reactive({});

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

  try {
    state.learningUnit = await circleStore.loadSelfEvaluation(
      props.courseSlug,
      props.circleSlug,
      props.learningUnitSlug
    );
  } catch (error) {
    log.error(error);
  }
});
</script>

<template>
  <SelfEvaluation v-if="state.learningUnit" :learning-unit="state.learningUnit" />
</template>

<style lang="postcss" scoped></style>
