<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 { useCourseSessionsStore } from "@/stores/courseSessions";
import { computed, reactive } from "vue";
import LearningContentNavigation from "./LearningContentNavigation.vue";

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

const circleStore = useCircleStore();
const courseSession = useCourseSessionsStore();

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 })"
      :next-button-text="$t('learningContent.completeAndContinue')"
      :show-border="false"
      @exit="circleStore.closeSelfEvaluation(props.learningUnit)"
      @next="circleStore.closeSelfEvaluation(props.learningUnit)"
    >
      <div class="container-medium h-full">
        <div class="mt-8 lg:mt-40">
          <h2 class="heading-2">
            {{ currentQuestion.competence_id }} {{ currentQuestion.title }}
          </h2>

          <div
            class="mt-4 flex flex-col justify-between gap-8 lg:mt-8 lg:flex-row lg:gap-12"
          >
            <button
              class="inline-flex flex-1 items-center border p-4 text-left"
              :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="mr-4 h-16 w-16"></it-icon-smiley-happy>
              <span class="text-large font-bold">{{ $t("selfEvaluation.yes") }}.</span>
            </button>
            <button
              class="inline-flex flex-1 items-center border p-4 text-left"
              :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="mr-4 h-16 w-16"></it-icon-smiley-thinking>
              <span class="text-xl font-bold">{{ $t("selfEvaluation.no") }}.</span>
            </button>
          </div>

          <div class="mt-6 lg:mt-12">
            {{ $t("selfEvaluation.progressText") }}
            <router-link
              :to="courseSession.courseSessionForRoute?.competence_url || '/'"
              class="text-primary-500 underline"
            >
              {{ $t("selfEvaluation.progressLink") }}
            </router-link>
          </div>
        </div>
        <LearningContentNavigation
          :show-next-button="
            questions.length > 1 && state.questionIndex + 1 < questions.length
          "
          :show-back-button="showBackButton"
          :question-index="state.questionIndex"
          :max-question-index="questions.length"
          @back="handleBack"
          @continue="handleContinue"
        ></LearningContentNavigation>
      </div>
    </LearningContentContainer>
  </div>
</template>

<style scoped></style>
