<script setup lang="ts">
import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { useCompetenceStore } from "@/stores/competence";
import type { CourseCompletionStatus } from "@/types";
import * as log from "loglevel";
import type { Ref } from "vue";
import { computed, ref } from "vue";
import { useI18n } from "vue-i18n";

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

interface MenuItem {
  id: CourseCompletionStatus;
  name: string;
  iconName: string;
}

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

const competenceStore = useCompetenceStore();

const shownCriteria = computed(() => {
  return competenceStore.flatPerformanceCriteria().filter((criteria) => {
    return criteria.completion_status === activeMenuItem.value.id;
  });
});

const { t } = useI18n();

const mobileMenuItems: MenuItem[] = [
  {
    id: "fail",
    name: `«${t("selfEvaluation.no")}»`,
    iconName: "it-icon-smiley-thinking",
  },
  {
    id: "success",
    name: `«${t("selfEvaluation.yes")}»`,
    iconName: "it-icon-smiley-happy",
  },
  {
    id: "unknown",
    name: t("competences.notAssessed"),
    iconName: "it-icon-smiley-neutral",
  },
];

const activeMenuItem: Ref<MenuItem> = ref(mobileMenuItems[0]);

function updateActiveState(status: CourseCompletionStatus) {
  activeMenuItem.value =
    mobileMenuItems.find((item) => status === item.id) || mobileMenuItems[0];
}
</script>

<template>
  <div class="container-large">
    <nav class="py-4 lg:pb-8">
      <router-link
        class="btn-text inline-flex items-center pl-0"
        :to="`${competenceStore.competenceProfilePage()?.frontend_url}`"
      >
        <it-icon-arrow-left />
        <span>zurück</span>
      </router-link>
    </nav>
    <div class="mb-4 flex flex-col items-center justify-between lg:mb-10 lg:flex-row">
      <h1>Einschätzungen</h1>
      <ItDropdownSelect
        v-model="competenceStore.selectedCircle"
        class="mt-4 w-full lg:mt-0 lg:w-96"
        :items="competenceStore.availableCircles"
      ></ItDropdownSelect>
      <div class="w-full lg:hidden">
        <ItDropdownSelect
          v-model="activeMenuItem"
          class="mt-4 w-full lg:mt-0 lg:w-96"
          :items="mobileMenuItems"
        ></ItDropdownSelect>
      </div>
    </div>
    <div class="bg-white p-8">
      <div
        class="mb-4 flex hidden flex-col justify-between border-b pb-4 lg:block lg:flex-row lg:items-center"
      >
        <button
          v-for="item in mobileMenuItems"
          :key="item.id"
          :class="{
            'bg-gray-200': activeMenuItem.id === item.id,
            'mr-6': item.id !== 'unknown',
          }"
          class="mr-6 inline-block px-2 py-4"
          @click="updateActiveState(item.id)"
        >
          <div class="flex flex-row items-center">
            <span class="mr-2 inline-block">{{ item.name }}</span>
            <component :is="item.iconName"></component>
          </div>
        </button>
      </div>
      <ul class="mb-6">
        <li
          v-for="criteria in shownCriteria"
          :key="criteria.id"
          class="mb-4 border-b pb-4"
        >
          <PerformanceCriteriaRow
            :criteria="criteria"
            :show-state="true"
            :course-slug="props.courseSlug"
          ></PerformanceCriteriaRow>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped></style>
