<script setup lang="ts">
import ComptenceProgress from '@/components/competences/CompetenceProgress.vue'
import LeistungskriteriumRow from '@/components/competences/LeistungskriteriumRow.vue'
import {ref} from "vue";

const props = defineProps<{
  competence: object,
  userProgress: object
}>()

const isOpen = ref(false);

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

const userStateForCriteria = (id: string) => props.userProgress[id] ? props.userProgress[id] : 'open'

</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.description}}</h2>
        <button
          class="transition-transform"
          :class="{'rotate-180': isOpen}">
          <it-icon-arrow-down
            @click="togglePerformanceCriteria()"
            class="h-10 w-10"
            aria-hidden="true"/></button>
      </div>
      <ComptenceProgress
      :total="7"
      :done="3"
      :open="2"
      ></ComptenceProgress>
    </div>
    <ul v-if="isOpen">
      <li
        v-for="performanceCriteria in competence.criteria" :key="performanceCriteria.description"
        class="mb-4 pb-4 border-b border-gray-500">
        <LeistungskriteriumRow
          :state="userStateForCriteria(`${performanceCriteria.id}`)"
          :showState="true"
          :unit-url="performanceCriteria.learning_unit.slug"
          :unit="performanceCriteria.pc_id"
          :title="performanceCriteria.title"
          :unit-id="performanceCriteria.learning_unit.id"></LeistungskriteriumRow>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped></style>
