<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";

log.debug("CompetencesMainView created");

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

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="flex flex-col lg:flex-row items-center justify-between mb-4 lg:mb-10">
      <h1>Einschätzungen</h1>
      <ItDropdownSelect
        v-model="competenceStore.selectedCircle"
        class="w-full lg:w-96 mt-4 lg:mt-0"
        :items="competenceStore.availableCircles"
      ></ItDropdownSelect>
      <div class="lg:hidden w-full">
        <ItDropdownSelect
          v-model="activeMenuItem"
          class="w-full lg:w-96 mt-4 lg:mt-0"
          :items="mobileMenuItems"
        ></ItDropdownSelect>
      </div>
    </div>
    <div class="bg-white p-8">
      <div
        class="border-b flex flex-col lg:flex-row lg:items-center pb-4 mb-4 hidden lg:block justify-between"
      >
        <button
          v-for="item in mobileMenuItems"
          :key="item.id"
          :class="{
            'bg-gray-200': activeMenuItem.id === item.id,
            'mr-6': item.id !== 'unknown',
          }"
          class="py-4 px-2 mr-6 inline-block"
          @click="updateActiveState(item.id)"
        >
          <div class="flex flex-row items-center">
            <span class="inline-block mr-2">{{ 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 pb-4 border-b"
        >
          <PerformanceCriteriaRow
            :criteria="criteria"
            :show-state="true"
          ></PerformanceCriteriaRow>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped></style>
