<script setup lang="ts">
import ItToggleArrow from "@/components/ui/ItToggleArrow.vue";
import log from "loglevel";
import { ref, watch } from "vue";
import SinglePerformanceCriteriaRow from "@/pages/competence/SinglePerformanceCriteriaRow.vue";
import type { ActionCompetence } from "@/types";

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

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

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

const isOpen = ref(false);

watch(
  () => props.allOpen,
  (newValue) => {
    isOpen.value = newValue;
  }
);

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

<template>
  <div>
    <div class="-mx-8 border-b 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.title }} ({{ competence.competence_id }})
        </h2>
        <ItToggleArrow :is-open="isOpen" :small="isInline"></ItToggleArrow>
      </div>
    </div>
    <ul v-if="isOpen">
      <li class="my-4 border-b pb-4 font-bold">
        {{ $t("a.Leistungsziele") }}
      </li>

      <li
        v-for="performanceCriteria in competence.performance_criteria"
        :key="performanceCriteria.id"
        class="my-4 border-b pb-4 last:border-0"
      >
        <SinglePerformanceCriteriaRow
          :criterion="performanceCriteria"
          :show-state="false"
          :course-slug="props.courseSlug"
          :show-assess-again="props.showAssessAgain"
        ></SinglePerformanceCriteriaRow>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped></style>
