<script setup lang="ts">
import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
import { useCompetenceStore } from "@/stores/competence";
import type { CompetencePage } from "@/types";
import { ref } from "vue";

const competenceStore = useCompetenceStore();

const props = defineProps<{
  competence: CompetencePage;
}>();

const isOpen = ref(false);

const togglePerformanceCriteria = () => {
  isOpen.value = !isOpen.value;
};
</script>

<template>
  <div>
    <div :class="{ 'pb-8 border-b border-gray-500 mb-4': isOpen }" class="-mx-8 px-8">
      <div class="mb-4 flex flex-row justify-between items-center">
        <h2 class="text-large">
          {{ competence.competence_id }} {{ competence.title }}
        </h2>
        <button class="transition-transform" :class="{ 'rotate-180': isOpen }">
          <it-icon-arrow-down
            class="h-10 w-10"
            aria-hidden="true"
            @click="togglePerformanceCriteria()"
          />
        </button>
      </div>
      <ComptenceProgress
        :status-count="competenceStore.calcStatusCount(competence.children)"
      ></ComptenceProgress>
    </div>
    <ul v-if="isOpen">
      <li
        v-for="performanceCriteria in competence.children"
        :key="performanceCriteria.id"
        class="mb-4 pb-4 border-b border-gray-500"
      >
        <PerformanceCriteriaRow
          :criteria="performanceCriteria"
          :show-state="true"
        ></PerformanceCriteriaRow>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped></style>
