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

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

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

const courseCompletionData = useCourseDataWithCompletion(props.courseSlug);

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 = (courseCompletionData.circles.value ?? []).map((c, index) => {
    return { ...c, sortKey: index };
  });
  return _.orderBy(
    _.uniqBy(
      (courseCompletionData.flatPerformanceCriteria.value ?? [])
        .filter((pc) => Boolean(pc.learning_unit))
        .map((pc) => {
          return {
            luId: pc.learning_unit?.id,
            luTitle: pc.learning_unit?.title,
            luSlug: pc.learning_unit?.slug,
            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 = (courseCompletionData.flatPerformanceCriteria.value ?? []).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" :data-cy="`${selfEvaluation.luSlug}-fail`">
              {{ 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" :data-cy="`${selfEvaluation.luSlug}-success`">
              {{ 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" :data-cy="`${selfEvaluation.luSlug}-unknown`">
              {{ selfEvaluation.countUnknown }}
            </div>
          </li>
        </div>

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

<style scoped></style>
