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

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

const circleStore = useCircleStore();

function toggleCompleted(learningContent: LearningContent) {
  circleStore.markCompletion(learningContent, !learningContent.completed);
}

const someFinished = computed(() => {
  if (props.learningSequence && circleStore.circle) {
    return circleStore.circle.someFinishedInLearningSequence(props.learningSequence.translation_key);
  }

  return false;
})

</script>

<template>
  <div class="mb-8 learning-sequence" :id="learningSequence.translation_key">
    <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"
      :class="{
        'border-l-sky-500': someFinished,
        'border-l-gray-500': !someFinished,
      }"
    >
      <div
        v-for="learningUnit in learningSequence.learningUnits"
        :key="learningUnit.id"
        class="pt-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"
          :key="learningContent.id"
          class="flex items-center gap-4 pb-3"
        >
          <ItCheckbox
            :modelValue="learningContent.completed"
            @click="toggleCompleted(learningContent)"
          >
            <span @click.stop="circleStore.openLearningContent(learningContent)">{{ learningContent.contents[0].type }}: {{ learningContent.title }}</span>
          </ItCheckbox>
        </div>

        <div
          v-if="learningUnit.id"
          class="hover:cursor-pointer"
          @click="circleStore.openSelfEvaluation(learningUnit)"
        >
          <div
            v-if="circleStore.calcSelfEvaluationStatus(learningUnit)"
            class="flex items-center gap-4 pb-3"
          >
            <it-icon-smiley-happy/>
            <span>Selbsteinschätzung: Ich kann das.</span>
          </div>
          <div
            v-else-if="circleStore.calcSelfEvaluationStatus(learningUnit) === false"
            class="flex items-center gap-4 pb-3"
          >
            <it-icon-smiley-thinking/>
            <span>Selbsteinschätzung: Muss ich nochmals anschauen</span>
          </div>
          <div
            v-else
            class="flex items-center gap-4 pb-3"
          >
            <it-icon-smiley-neutral/>
            <span>Selbsteinschätzung</span>
          </div>
        </div>

        <hr v-if="!learningUnit.last" class="-mx-4 text-gray-500">

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

</template>

<style scoped>

</style>
