<script setup lang="ts">
import { useCourseDataWithCompletion } from "@/composables";
import { computed } from "vue";
import { calcPerformanceCriteriaStatusCount } from "@/services/competence";

const props = defineProps<{
  courseSlug: string;
  userId: string;
  circleId?: string;
}>();

const courseData = useCourseDataWithCompletion(props.courseSlug, props.userId);

const circleStatusCount = computed(() => {
  if (props.circleId) {
    return calcPerformanceCriteriaStatusCount(
      (courseData.flatPerformanceCriteria.value ?? []).filter(
        (pc) => pc.circle.id === props.circleId
      )
    );
  }
  return calcPerformanceCriteriaStatusCount(courseData.flatPerformanceCriteria.value);
});
</script>

<template>
  <div v-if="courseData.loaded" class="ml-4 flex flex-row items-center">
    <div class="mr-6 flex flex-row items-center">
      <it-icon-smiley-thinking
        class="mr-2 inline-block h-8 w-8"
      ></it-icon-smiley-thinking>
      <p class="text-bold inline-block w-6">
        {{ circleStatusCount.FAIL }}
      </p>
    </div>
    <li class="mr-6 flex flex-row items-center">
      <it-icon-smiley-happy class="mr-2 inline-block h-8 w-8"></it-icon-smiley-happy>
      <p class="text-bold inline-block w-6">
        {{ circleStatusCount.SUCCESS }}
      </p>
    </li>
    <li class="flex flex-row items-center">
      <it-icon-smiley-neutral
        class="mr-2 inline-block h-8 w-8"
      ></it-icon-smiley-neutral>
      <p class="text-bold inline-block w-6">
        {{ circleStatusCount.UNKNOWN }}
      </p>
    </li>
  </div>
</template>
