<script setup lang="ts">
import ItCheckbox from '@/components/ui/ItCheckbox.vue';
import type {LearningContent, LearningSequence} from '@/services/circle';

const props = defineProps<{
  learningSequence: LearningSequence
  completionData: any
}>()

const contentCompleted = (learningContent: LearningContent) => {
  if (props.completionData?.completed_learning_contents) {
    return props.completionData.completed_learning_contents.findIndex((e) => {
      return e.learning_content_key === learningContent.translation_key && e.completed;
    }) >= 0;
  }

  return false;
}

</script>

<template>
  <div class="mb-8 learning-sequence">
    <div class="flex items-center gap-4 mb-2">
      <component :is="learningSequence.icon" />
      <h3 class="text-xl">
        {{ learningSequence.title }}
      </h3>
      <div>{{ learningSequence.minutes }} Minuten</div>
    </div>

    <div class="bg-white px-4 border border-gray-500 border-l-4 border-l-sky-500">
      <div
        v-for="learningUnit in learningSequence.learningUnits"
        class="py-3"
      >
        <div class="pb-3 flex gap-4" v-if="learningUnit.title">
          <div class="font-bold">{{ learningUnit.title }}</div>
          <div>{{ learningUnit.minutes }} Minuten</div>
        </div>

        <div
          v-for="learningContent in learningUnit.learningContents"
          class="flex items-center gap-4 pb-3"
        >
          <ItCheckbox
            :modelValue="contentCompleted(learningContent)"
            @click="$emit('toggleLearningContentCheckbox', learningContent, !contentCompleted(learningContent))"
          >
            {{ learningContent.contents[0].type }}: {{ learningContent.title }}
          </ItCheckbox>
        </div>

        <hr class="-mx-4 text-gray-500">

      </div>
    </div>
  </div>

</template>

<style scoped>

</style>
