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

import { useCurrentCourseSession } from "@/composables";
import { COMPLETION_FAILURE, COMPLETION_SUCCESS } from "@/constants";
import LearningContentContainer from "@/pages/learningPath/learningContentPage/LearningContentContainer.vue";
import LearningContentMultiLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentMultiLayout.vue";
import eventBus from "@/utils/eventBus";
import { useRouteQuery } from "@vueuse/router";
import { computed, onUnmounted } from "vue";

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

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

const questionIndex = useRouteQuery("step", "0", { transform: Number, mode: "push" });

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

const questions = computed(() => props.learningUnit?.children);
const currentQuestion = computed(() => questions.value[questionIndex.value]);
const showPreviousButton = computed(() => questionIndex.value != 0);
const showNextButton = computed(
  () => questionIndex.value + 1 < questions.value?.length && questions.value?.length > 1
);
const showExitButton = computed(
  () =>
    questions.value?.length === 1 || questions.value?.length === questionIndex.value + 1
);

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

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

function handleFinishedLearningContent() {
  circleStore.closeSelfEvaluation(props.learningUnit);
}

eventBus.on("finishedLearningContent", handleFinishedLearningContent);

onUnmounted(() => {
  eventBus.off("finishedLearningContent", handleFinishedLearningContent);
});
</script>

<template>
  <div v-if="learningUnit">
    <LearningContentContainer
      @exit="circleStore.closeSelfEvaluation(props.learningUnit)"
    >
      <LearningContentMultiLayout
        :current-step="questionIndex"
        :sub-title="$t('selfEvaluation.title')"
        :title="$t('selfEvaluation.title', { title: learningUnit.title })"
        icon="it-icon-lc-learning-module"
        :steps-count="questions.length"
        :show-next-button="showNextButton"
        :show-exit-button="showExitButton"
        :show-start-button="false"
        :show-previous-button="showPreviousButton"
        :base-url="props.learningUnit.evaluate_url"
        @previous="handleBack()"
        @next="handleContinue()"
      >
        <div class="h-full">
          <div class="mt-8">
            <h3 class="heading-3">
              {{ currentQuestion.competence_id }} {{ currentQuestion.title }}
            </h3>

            <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.competence_url"
                class="text-primary-500 underline"
              >
                {{ $t("selfEvaluation.progressLink") }}
              </router-link>
            </div>
          </div>
        </div>
      </LearningContentMultiLayout>
    </LearningContentContainer>
  </div>
</template>

<style scoped></style>
