<script setup lang="ts">
import LearningContent from "@/components/learningPath/LearningContent.vue";
import { useAppStore } from "@/stores/app";
import { useCircleStore } from "@/stores/circle";
import type { LearningContent as LearningContentType } from "@/types";
import * as log from "loglevel";
import { onMounted, reactive, watch } from "vue";

log.debug("LearningContentView created");

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

const state: { learningContent?: LearningContentType } = reactive({});

const appStore = useAppStore();
appStore.showMainNavigationBar = false;

const circleStore = useCircleStore();

const loadLearningContent = async () => {
  try {
    state.learningContent = 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>
  <LearningContent
    v-if="state.learningContent"
    :learning-content="state.learningContent"
  />
</template>

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