<script setup lang="ts">
import * as log from 'loglevel';
import {computed, reactive} from 'vue';
import {useCircleStore} from '@/stores/circle';

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

const circleStore = useCircleStore();

const state = reactive({
  questionIndex: 0,
});

const questions = computed(() => circleStore.currentSelfEvaluation!.children);
const currentQuestion = computed(() => questions.value[state.questionIndex]);

function handleContinue() {
  log.debug('handleContinue');
  if (state.questionIndex + 1 < questions.value.length) {
    log.debug('increment questionIndex', state.questionIndex);
    state.questionIndex += 1;
  } else {
    log.debug('continue to next learning content');
    circleStore.continueFromSelfEvaluation();
  }
}

</script>

<template>
  <div>
    <nav
      class="
        px-4 lg:px-8
        py-4
        flex justify-between items-center
        border-b border-gray-500
      "
    >
      <button
        type="button"
        class="btn-text inline-flex items-center px-3 py-2 font-normal"
        @click="circleStore.closeSelfEvaluation()"
      >
        <it-icon-arrow-left class="-ml-1 mr-1 h-5 w-5"></it-icon-arrow-left>
        <span class="hidden lg:inline">zurück zum Circle</span>
      </button>

      <h1 class="text-xl hidden lg:block">{{ circleStore.currentSelfEvaluation.title }}</h1>

      <button
        type="button"
        class="btn-blue"
        @click="handleContinue()"
      >
        Weiter
      </button>
    </nav>


    <div class="mx-auto max-w-6xl px-4 lg:px-8 py-4">

      <div class="mt-2 lg:mt-8 text-gray-700">Schritt {{ state.questionIndex + 1 }} von {{ questions.length }}</div>

      <p class="text-xl mt-4">
        Überprüfe, ob du in der Lernheinheit <span class="font-bold">"{{ circleStore.currentSelfEvaluation.title }}"</span> alles verstanden hast.<br>
        Lies die folgende Aussage und bewerte sie:
      </p>

      <div class="mt-4 lg:mt-8 p-6 lg:p-12 border border-gray-500">
        <h2 class="heading-2">{{ currentQuestion.title }}</h2>

        <div class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-6">
          <button
            @click="circleStore.markCompletion(currentQuestion, true)"
            class="flex-1 inline-flex items-center text-left p-4 border"
            :class="{
              'border-green-500': currentQuestion.completed,
              'border-2': currentQuestion.completed,
              'border-gray-500': !currentQuestion.completed,
            }"
          >
            <it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
            <span class="font-bold text-xl">
            Ja, ich kann das.
            </span>
          </button>
          <button
            @click="circleStore.markCompletion(currentQuestion, false)"
            class="flex-1 inline-flex items-center text-left p-4 border"
            :class="{
              'border-orange-500': currentQuestion.completed === false,
              'border-2': currentQuestion.completed === false,
              'border-gray-500': currentQuestion.completed === true || currentQuestion.completed === undefined,
            }"
          >
            <it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
            <span class="font-bold text-xl">
              Das muss ich nochmals anschauen.
            </span>
          </button>
        </div>

        <div class="mt-6 lg:mt-12">Schau dein Fortschritt in deinem Kompetenzprofil: Kompetenzprofil öffnen</div>
      </div>

    </div>

  </div>

</template>

<style scoped>
</style>
