<script setup lang="ts">
import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue";
import type { ProgressDashboardCompetenceType } from "@/gql/graphql";
import { fetchProgressData } from "@/services/dashboard";
import type { Ref } from "vue";
import { computed, onMounted, ref } from "vue";

const props = defineProps<{
  courseId: string;
  courseSlug: string;
  sessionToContinueId: string;
}>();

const DEFAULT_COMPETENCE = { _id: "", total_count: 0, success_count: 0, fail_count: 0 };
const competence: Ref<ProgressDashboardCompetenceType | null> = ref(DEFAULT_COMPETENCE);

const competenceCriteriaUrl = computed(() => {
  return `/course/${props.courseSlug}/competence/self-evaluation-and-feedback?courseSessionId=${props.sessionToContinueId}`;
});

onMounted(async () => {
  const data = await fetchProgressData(props.courseId);
  competence.value = data?.competence ?? null;
});
</script>

<template>
  <div v-if="competence" class="sm:w-[395px]">
    <CompetenceSummaryBox
      :fail-count="competence.fail_count"
      :success-count="competence.success_count"
      :details-link="competenceCriteriaUrl"
    />
  </div>
</template>
