<script setup lang="ts">
import type { CourseSession } from "@/types";
import log from "loglevel";
import { computed, onMounted, ref } from "vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import { itGet } from "@/fetchHelpers";
import { useCourseSessionDetailQuery } from "@/composables";

const props = defineProps<{
  courseSession: CourseSession;
  circleId: string;
}>();

log.debug("FeedbackSubmissionProgress created");

const courseSessionDetailResult = useCourseSessionDetailQuery();
const completeFeedbacks = ref(0);

const numFeedbacks = computed(() => {
  return courseSessionDetailResult.filterMembers().length;
});

onMounted(async () => {
  const data = await itGet(
    `/api/core/feedback/${props.courseSession.id}/${props.circleId}/`
  );
  completeFeedbacks.value = data.amount;
});
</script>

<template>
  <div>
    <ItProgress
      :status-count="{
        SUCCESS: completeFeedbacks,
        UNKNOWN: numFeedbacks - completeFeedbacks,
        FAIL: 0,
      }"
    />
    <div class="text-gray-900">
      {{
        $t("x von y Feedbacks abgegeben", {
          x: completeFeedbacks,
          y: numFeedbacks,
        })
      }}
    </div>
  </div>
</template>
