<script setup lang="ts">
import LearningContentParent from "@/pages/learningPath/learningContentPage/LearningContentParent.vue";
import { useCircleStore } from "@/stores/circle";
import type { LearningContent } from "@/types";
import * as log from "loglevel";
import type { Ref } from "vue";
import { onMounted, ref, watch } from "vue";

log.debug("LearningContentView created");

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

const learningContent: Ref<LearningContent | undefined> = ref(undefined);

const circleStore = useCircleStore();

const loadLearningContent = async () => {
  try {
    learningContent.value = await circleStore.loadLearningContent(
      props.courseSlug,
      props.circleSlug,
      props.contentSlug
    );
  } catch (error) {
    log.error(error);
  }
};

watch(
  () => props.contentSlug,
  async () => {
    log.debug(
      "LearningContentView props.contentSlug changed",
      props.courseSlug,
      props.circleSlug,
      props.contentSlug
    );
    await loadLearningContent();
  }
);

onMounted(async () => {
  log.debug(
    "LearningContentView mounted",
    props.courseSlug,
    props.circleSlug,
    props.contentSlug
  );
  await loadLearningContent();
});
</script>

<template>
  <LearningContentParent v-if="learningContent" :learning-content="learningContent" />
</template>

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