<script setup lang="ts">
import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import ItToggleArrow from "@/components/ui/ItToggleArrow.vue";
import { useCompetenceStore } from "@/stores/competence";
import type { CompetencePage } from "@/types";
import log from "loglevel";
import { ref } from "vue";

const competenceStore = useCompetenceStore();

interface Props {
  competence: CompetencePage;
  courseSlug: string;
  showAssessAgain?: boolean;
  isInline?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  showAssessAgain: true,
  isInline: false,
});

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

const isOpen = ref(false);

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

<template>
  <div>
    <div :class="{ 'mb-4 border-b pb-8': isOpen }" class="-mx-8 px-8">
      <div
        class="flex flex-row items-center justify-between"
        :class="props.isInline ? '' : 'mb-4'"
        role="button"
        aria-pressed="false"
        @click="togglePerformanceCriteria()"
      >
        <h2 :class="props.isInline ? ['text-bold', 'w-2/5'] : 'text-large'">
          {{ competence.competence_id }} {{ competence.title }}
        </h2>
        <ItProgress
          v-if="isInline"
          class="w-[330px]"
          :status-count="
            competenceStore.calcStatusCount(
              competenceStore.criteriaByCompetence(competence)
            )
          "
        ></ItProgress>
        <ItToggleArrow :is-open="isOpen" :small="isInline"></ItToggleArrow>
      </div>
      <ItProgress
        v-if="!isInline"
        :status-count="
          competenceStore.calcStatusCount(
            competenceStore.criteriaByCompetence(competence)
          )
        "
      ></ItProgress>
    </div>
    <ul v-if="isOpen">
      <li
        v-for="performanceCriteria in competenceStore.criteriaByCompetence(competence)"
        :key="performanceCriteria.id"
        class="mb-4 border-b pb-4 last:border-0"
      >
        <PerformanceCriteriaRow
          :criteria="performanceCriteria"
          :show-state="true"
          :course-slug="props.courseSlug"
          :show-assess-again="props.showAssessAgain"
        ></PerformanceCriteriaRow>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped></style>
