<script setup lang="ts">
import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
import { useCircleStore } from "@/stores/circle";
import type { LearningContent } from "@/types";
import log from "loglevel";
import { computed } from "vue";

import DescriptionBlock from "@/components/learningPath/blocks/DescriptionBlock.vue";
import DescriptionTextBlock from "@/components/learningPath/blocks/DescriptionTextBlock.vue";
import FeedbackBlock from "@/components/learningPath/blocks/FeedbackBlock.vue";
import IframeBlock from "@/components/learningPath/blocks/IframeBlock.vue";
import PlaceholderBlock from "@/components/learningPath/blocks/PlaceholderBlock.vue";
import VideoBlock from "@/components/learningPath/blocks/VideoBlock.vue";

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

const circleStore = useCircleStore();

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

const block = computed(() => {
  if (props.learningContent?.contents?.length) {
    return props.learningContent.contents[0];
  }

  return undefined;
});

// can't use the type as component name, as some are reserved HTML components, e.g. video
const COMPONENTS: Record<string, any> = {
  // todo: can we find a better type here than any? ^
  placeholder: PlaceholderBlock,
  video: VideoBlock,
  assignment: DescriptionTextBlock,
  resource: DescriptionTextBlock,
  exercise: IframeBlock,
  test: IframeBlock,
  learningmodule: IframeBlock,
  feedback: FeedbackBlock,
};
const DEFAULT_BLOCK = DescriptionBlock;

const component = computed(() => {
  if (block.value) {
    return COMPONENTS[block.value.type] || DEFAULT_BLOCK;
  }
  return DEFAULT_BLOCK;
});
</script>

<template>
  <LearningContentContainer
    v-if="block"
    :title="learningContent.title"
    :next-button-text="$t('learningContent.completeAndContinue')"
    @exit="circleStore.closeLearningContent(props.learningContent)"
    @next="circleStore.continueFromLearningContent(props.learningContent)"
  >
    <div class="content">
      <component
        :is="component"
        :value="block.value"
        :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>
