<script setup lang="ts">
import AssignmentProgressSummaryBox from "@/components/dashboard/AssignmentProgressSummaryBox.vue";
import type { ProgressDashboardAssignmentType } 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_ASSIGNMENT = {
  _id: "",
  points_achieved_count: 0,
  points_max_count: 0,
  total_count: 0,
};
const assignment: Ref<ProgressDashboardAssignmentType | null> = ref(DEFAULT_ASSIGNMENT);

const competenceCertificateUrl = computed(() => {
  return `/course/${props.courseSlug}/competence/certificates?courseSessionId=${props.sessionToContinueId}`;
});

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

<template>
  <div v-if="assignment">
    <div class="sm:w-[395px]">
      <AssignmentProgressSummaryBox
        :total-assignments="assignment.total_count"
        :achieved-points-count="assignment.points_achieved_count"
        :max-points-count="assignment.points_max_count"
        :details-link="competenceCertificateUrl"
      />
    </div>
  </div>
</template>
