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

import LearningContentContainer from "@/pages/learningPath/learningContentPage/LearningContentContainer.vue";
import { computed } from "vue";
import { useRouter } from "vue-router";

const props = defineProps<{
  courseSlug: string;
  criteriaSlug: string;
}>();

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

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

const router = useRouter();

const singleCriteria = computed(() => {
  return competenceStore.flatPerformanceCriteria().find((criteria) => {
    return criteria.slug === props.criteriaSlug;
  });
});
</script>

<template>
  <div v-if="singleCriteria" class="absolute bottom-0 top-0 w-full bg-white">
    <LearningContentContainer @exit="router.back()">
      <div v-if="singleCriteria" class="container-medium">
        <div class="mt-4 border p-6 lg:mt-8 lg:p-12">
          <h2 class="heading-2">
            {{ singleCriteria.competence_id }} {{ singleCriteria.title }}
          </h2>

          <div class="mt-4 flex flex-col justify-between gap-6 lg:mt-8 lg:flex-row">
            <button
              class="inline-flex flex-1 items-center border p-4 text-left"
              :class="{
                'border-green-500': singleCriteria.completion_status === 'success',
                'border-2': singleCriteria.completion_status === 'success',
              }"
              data-cy="success"
              @click="circleStore.markCompletion(singleCriteria, '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': singleCriteria.completion_status === 'fail',
                'border-2': singleCriteria.completion_status === 'fail',
              }"
              data-cy="fail"
              @click="circleStore.markCompletion(singleCriteria, '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>
      </div>
    </LearningContentContainer>
  </div>
</template>

<style scoped></style>
