<script setup lang="ts">
import LearningContentContainer from "@/pages/learningPath/learningContentPage/LearningContentContainer.vue";
import { useCircleStore } from "@/stores/circle";
import type { LearningContent, LearningContentType } from "@/types";
import eventBus from "@/utils/eventBus";
import log from "loglevel";
import type { Component } from "vue";
import { computed, onUnmounted } from "vue";
import AssignmentBlock from "./blocks/AssignmentBlock.vue";
import AttendanceDayBlock from "./blocks/AttendanceDayBlock.vue";
import FeedbackBlock from "./blocks/FeedbackBlock.vue";
import IframeBlock from "./blocks/IframeBlock.vue";
import MediaLibraryBlock from "./blocks/MediaLibraryBlock.vue";
import PlaceholderBlock from "./blocks/PlaceholderBlock.vue";
import RichTextBlock from "./blocks/RichTextBlock.vue";
import VideoBlock from "./blocks/VideoBlock.vue";

log.debug("LearningContent.vue setup");

const circleStore = useCircleStore();

const props = defineProps<{
  learningContent: LearningContent;
}>();

// can't use the type as component name, as some are reserved HTML components, e.g. video
const COMPONENTS: Record<LearningContentType, Component> = {
  "learnpath.LearningContentAssignment": AssignmentBlock,
  "learnpath.LearningContentAttendanceDay": AttendanceDayBlock,
  "learnpath.LearningContentFeedback": FeedbackBlock,
  "learnpath.LearningContentLearningModule": IframeBlock,
  "learnpath.LearningContentMediaLibrary": MediaLibraryBlock,
  "learnpath.LearningContentPlaceholder": PlaceholderBlock,
  "learnpath.LearningContentRichText": RichTextBlock,
  "learnpath.LearningContentTest": IframeBlock,
  "learnpath.LearningContentVideo": VideoBlock,
};
const DEFAULT_BLOCK = PlaceholderBlock;

const component = computed(() => {
  return COMPONENTS[props.learningContent.content_type] || DEFAULT_BLOCK;
});

function handleFinishedLearningContent() {
  circleStore.continueFromLearningContent(props.learningContent);
}

eventBus.on("finishedLearningContent", handleFinishedLearningContent);

onUnmounted(() => {
  eventBus.off("finishedLearningContent", handleFinishedLearningContent);
});
</script>

<template>
  <LearningContentContainer
    @exit="circleStore.closeLearningContent(props.learningContent)"
  >
    <div>
      <component :is="component" :content="learningContent"></component>
    </div>
  </LearningContentContainer>
</template>

<style lang="scss" scoped>
$header-height: 77px;

.content {
  padding-top: $header-height;
}

.resource-text {
  p {
    margin-bottom: 1rem;
  }

  h2 {
    margin-bottom: 48px;
  }
}

.resource-text {
  p {
    margin-bottom: 1.5rem;
  }

  a {
    text-decoration: underline;
  }

  h2 {
    margin-bottom: 2rem;
  }

  h3 {
    margin-bottom: 1rem;
    margin-top: 1.5rem;
  }

  ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-bottom: 1.5rem;
    margin-left: 1rem;
  }
}
</style>
