<script setup lang="ts">
import { useCircleStore } from "@/stores/circle";
import type { LearningUnit } from "@/types";
import * as log from "loglevel";

import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
import { COMPLETION_FAILURE, COMPLETION_SUCCESS } from "@/constants";
import { computed, reactive } from "vue";

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

const circleStore = useCircleStore();

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

const props = defineProps<{
  learningUnit: LearningUnit;
}>();

const questions = computed(() => props.learningUnit?.children);
const currentQuestion = computed(() => questions.value[state.questionIndex]);
const showBackButton = computed(() => state.questionIndex != 0);

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(props.learningUnit);
  }
}

function handleBack() {
  log.debug("handleBack");
  if (state.questionIndex > 0 && state.questionIndex < questions.value.length) {
    state.questionIndex -= 1;
  }
}
</script>

<template>
  <div v-if="learningUnit">
    <LearningContentContainer
      :title="$t('selfEvaluation.title', { title: learningUnit.title })"
      :exit-text="$t('general.backToCircle')"
      :next-button-text="$t('general.next')"
      :show-back-button="showBackButton"
      @exit="circleStore.closeSelfEvaluation(props.learningUnit)"
      @next="handleContinue()"
      @back="handleBack()"
    >
      <div class="container-medium">
        <div class="mt-2 lg:mt-8 text-gray-700">
          {{
            $t("selfEvaluation.steps", {
              current: state.questionIndex + 1,
              max: questions.length,
            })
          }}
        </div>

        <p class="text-large mt-4">
          {{ $t("selfEvaluation.instruction[0]") }}
          <span class="font-bold">«{{ learningUnit.title }}»</span>
          {{ $t("selfEvaluation.instruction[1]") }}
          <br />
          {{ $t("selfEvaluation.instruction[2]") }}
        </p>

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

          <div class="mt-4 lg:mt-8 flex flex-col lg:flex-row justify-between gap-6">
            <button
              class="flex-1 inline-flex items-center text-left p-4 border"
              :class="{
                'border-green-500': currentQuestion.completion_status === 'success',
                'border-2': currentQuestion.completion_status === 'success',
              }"
              data-cy="success"
              @click="circleStore.markCompletion(currentQuestion, COMPLETION_SUCCESS)"
            >
              <it-icon-smiley-happy class="w-16 h-16 mr-4"></it-icon-smiley-happy>
              <span class="font-bold text-large">{{ $t("selfEvaluation.yes") }}.</span>
            </button>
            <button
              class="flex-1 inline-flex items-center text-left p-4 border"
              :class="{
                'border-orange-500':
                  currentQuestion.completion_status === COMPLETION_FAILURE,
                'border-2': currentQuestion.completion_status === COMPLETION_FAILURE,
              }"
              data-cy="fail"
              @click="circleStore.markCompletion(currentQuestion, 'fail')"
            >
              <it-icon-smiley-thinking class="w-16 h-16 mr-4"></it-icon-smiley-thinking>
              <span class="font-bold text-xl">{{ $t("selfEvaluation.no") }}.</span>
            </button>
          </div>

          <div class="mt-6 lg:mt-12">
            {{ $t("selfEvaluation.progressText") }}
            {{ $t("selfEvaluation.progressLink") }}
          </div>
        </div>
      </div>
    </LearningContentContainer>
  </div>
</template>

<style scoped></style>
