<script setup lang="ts">
import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import { useCompetenceStore } from "@/stores/competence";
import _ from "lodash";
import * as log from "loglevel";
import { computed } from "vue";

log.debug("CompetenceIndexPage created");

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

const competenceStore = useCompetenceStore();

const failedCriteria = computed(() => {
  return competenceStore
    .flatPerformanceCriteria()
    .filter((criteria) => {
      return criteria.completion_status === "fail";
    })
    .slice(0, 3);
});

const lastUpdatedCompetences = computed(() => {
  return _.orderBy(
    competenceStore.competences(),
    [
      (competence) => {
        let criteria = competence.children;
        if (competenceStore.selectedCircle.id != "all") {
          criteria = criteria.filter((criteria) => {
            return (
              criteria.circle.translation_key === competenceStore.selectedCircle.id
            );
          });
        }
        return (
          _.maxBy(criteria, "completion_status_updated_at")
            ?.completion_status_updated_at || ""
        );
      },
    ],
    ["desc"]
  ).slice(0, 3);
});

const countStatus = computed(() => {
  return competenceStore.calcStatusCount(competenceStore.flatPerformanceCriteria());
});
</script>

<template>
  <div class="container-large lg:mt-4">
    <div
      v-if="competenceStore.competenceProfilePage()"
      class="flex flex-col lg:flex-row lg:items-center justify-between mb-10"
    >
      <h1>{{ $t("competences.title") }}</h1>
      <ItDropdownSelect
        v-model="competenceStore.selectedCircle"
        class="w-full lg:w-96 mt-4 lg:mt-0"
        :items="competenceStore.availableCircles"
      ></ItDropdownSelect>
    </div>
    <div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
      <div>
        <h3 class="pb-4 border-b">{{ $t("competences.lastImprovements") }}</h3>
        <ul>
          <li
            v-for="competence in lastUpdatedCompetences"
            :key="competence.id"
            class="py-4 flex flex-col lg:flex-row lg:items-center border-b last:mb-8"
          >
            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">
              {{ competence.competence_id }} {{ competence.title }}
            </p>
            <ItProgress
              :status-count="
                competenceStore.calcStatusCount(
                  competenceStore.criteriaByCompetence(competence)
                )
              "
            ></ItProgress>
          </li>
        </ul>
        <router-link
          :to="`${competenceStore.competenceProfilePage()?.frontend_url}/competences`"
          class="btn-text inline-flex items-center pl-0 py-2"
        >
          <span>{{ $t("competences.showAll") }}</span>
          <it-icon-arrow-right></it-icon-arrow-right>
        </router-link>
      </div>
    </div>
    <div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
      <h3 class="pb-4 lg:pb-0 mb-4 border-b lg:border-0">
        {{ $t("competences.assessment") }}
      </h3>
      <ul
        class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6"
      >
        <li
          class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1"
        >
          <h5 class="text-gray-700 mb-4">«{{ $t("selfEvaluation.no") }}»</h5>
          <div class="flex flex-row items-center">
            <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
            <p class="text-7xl font-bold inline-block ml-4">{{ countStatus.fail }}</p>
          </div>
        </li>
        <li
          class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1"
        >
          <h5 class="text-gray-700 mb-4">«{{ $t("selfEvaluation.yes") }}»</h5>
          <div class="flex flex-row items-center">
            <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
            <p class="text-7xl font-bold inline-block ml-4">
              {{ countStatus.success }}
            </p>
          </div>
        </li>
        <li class="pb-4 lg:pb-0 border-b lg:border-b-0 lg:mb-0flex-1">
          <h5 class="text-gray-700 mb-4">{{ $t("competences.notAssessed") }}</h5>
          <div class="flex flex-row items-center">
            <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
            <p class="text-7xl font-bold inline-block ml-4">
              {{ countStatus.unknown }}
            </p>
          </div>
        </li>
      </ul>
      <router-link
        :to="`${competenceStore.competenceProfilePage()?.frontend_url}/criteria`"
        class="btn-text inline-flex items-center pl-0 py-2"
      >
        <span>{{ $t("competences.showAll") }}</span>
        <it-icon-arrow-right></it-icon-arrow-right>
      </router-link>
    </div>
    <div
      v-if="failedCriteria.length > 0"
      class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8"
    >
      <div class="border-b flex flex-row items-center pb-4 mb-4">
        <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
        <h3>«{{ $t("selfEvaluation.no") }}»</h3>
      </div>
      <ul class="mb-6">
        <li
          v-for="criteria in failedCriteria"
          :key="criteria.id"
          class="mb-4 pb-4 border-b"
        >
          <PerformanceCriteriaRow
            :criteria="criteria"
            :course-slug="props.courseSlug"
          ></PerformanceCriteriaRow>
        </li>
      </ul>
      <router-link
        :to="`${competenceStore.competenceProfilePage()?.frontend_url}/criteria`"
        class="btn-text inline-flex items-center pl-0 py-2"
      >
        <span>{{ $t("competences.showAll") }}</span>
        <it-icon-arrow-right></it-icon-arrow-right>
      </router-link>
    </div>
  </div>
</template>

<style scoped></style>
