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

import LearningContentContainer from "@/components/learningPath/LearningContentContainer.vue";
import { useRoute, useRouter } from "vue-router";

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

const competenceStore = useCompetenceStore();
const circleStore = useCircleStore();

const route = useRoute();
const router = useRouter();

let currentQuestion: PerformanceCriteria | undefined;
let competencePage: CompetencePage | undefined;

const findCriteria = () => {
  for (const page of competenceStore.competenceProfilePage()
    ?.children as CompetencePage[]) {
    for (const criteria of page.children) {
      if (criteria.slug === route.params["criteriaSlug"]) {
        currentQuestion = criteria;
        competencePage = page;
        break;
      }
    }
    if (competencePage) {
      break;
    }
  }
};

findCriteria();
// onMounted(() => {
//   console.log(route.params)
// });

// const questions = computed(() => props.learningUnit?.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(props.learningUnit);
//   }
// }
</script>

<template>
  <div v-if="competencePage" class="absolute top-0 w-full bottom-0 bg-white">
    <LearningContentContainer
      :title="''"
      :exit-text="$t('general.back')"
      :next-button-text="$t('general.save')"
      @exit="router.back()"
      @next="router.back()"
    >
      <div v-if="currentQuestion" class="container-medium">
        <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, '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 === 'fail',
                'border-2': currentQuestion.completion_status === 'fail',
              }"
              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>
      </div>
    </LearningContentContainer>
  </div>
</template>

<style scoped></style>
