<script setup lang="ts">
import { useCompetenceStore } from "@/stores/competence";
import * as log from "loglevel";
import { computed } from "vue";
import _ from "lodash";

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

log.debug("PerformanceCriteriaPage created", props);

const competenceStore = useCompetenceStore();

const uniqueLearningUnits = computed(() => {
  // FIXME: this complex calculation can go away,
  // once the criteria are in its own learning content
  // get the learningUnits sorted by circle order in the course
  const circles = competenceStore.circles.map((c, index) => {
    return { ...c, sortKey: index };
  });
  return _.orderBy(
    _.uniqBy(
      competenceStore.flatPerformanceCriteria().map((pc) => {
        return {
          luId: pc.learning_unit.id,
          luTitle: pc.learning_unit.title,
          circleId: pc.circle.id,
          circleTitle: pc.circle.title,
          url: pc.learning_unit.evaluate_url,
          sortKey: circles.find((c) => c.id === pc.circle.id)?.sortKey,
        };
      }),
      "luId"
    ),
    "sortKey"
  );
});

const criteriaByLearningUnit = computed(() => {
  return uniqueLearningUnits.value.map((lu) => {
    const criteria = competenceStore
      .flatPerformanceCriteria()
      .filter((pc) => pc.learning_unit.id === lu.luId);
    return {
      ...lu,
      countSuccess: criteria.filter((c) => c.completion_status === "SUCCESS").length,
      countFail: criteria.filter((c) => c.completion_status === "FAIL").length,
      countUnknown: criteria.filter((c) => c.completion_status === "UNKNOWN").length,
      criteria: criteria,
    };
  });
});
</script>

<template>
  <div class="container-large">
    <h2 class="mb-4 lg:py-4">{{ $t("a.Selbsteinschätzungen") }}</h2>
    <section class="mb-4 bg-white px-4 py-2">
      <div
        v-for="selfEvaluation in criteriaByLearningUnit"
        :key="selfEvaluation.luId"
        class="flex flex-col justify-between gap-4 border-b py-4 last:border-b-0 lg:flex-row lg:items-center"
      >
        <div class="lg:w-1/3">
          {{ $t("a.Circle") }}
          {{ selfEvaluation.circleTitle }}:
          {{ selfEvaluation.luTitle }}
        </div>

        <div class="flex flex-row items-center lg:w-1/3">
          <div class="mr-6 flex flex-row items-center">
            <it-icon-smiley-thinking
              class="mr-2 inline-block h-8 w-8"
            ></it-icon-smiley-thinking>
            <div class="w-6">
              {{ selfEvaluation.countFail }}
            </div>
          </div>
          <li class="mr-6 flex flex-row items-center">
            <it-icon-smiley-happy
              class="mr-2 inline-block h-8 w-8"
            ></it-icon-smiley-happy>
            <div class="w-6">
              {{ selfEvaluation.countSuccess }}
            </div>
          </li>
          <li class="flex flex-row items-center">
            <it-icon-smiley-neutral
              class="mr-2 inline-block h-8 w-8"
            ></it-icon-smiley-neutral>
            <div class="w-6">
              {{ selfEvaluation.countUnknown }}
            </div>
          </li>
        </div>

        <div>
          <router-link :to="selfEvaluation.url" class="link">
            {{ $t("a.Selbsteinschätzung anschauen") }}
          </router-link>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped></style>
