<script setup lang="ts">
import { useDashboardStore } from "@/stores/dashboard";
import { computed } from "vue";
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import { getLearningPathUrl } from "@/utils/utils";
import type {
  CourseProgressType,
  ProgressDashboardAssignmentType,
  ProgressDashboardCompetenceType,
} from "@/gql/graphql";
import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue";
import AssignmentProgressSummaryBox from "@/components/dashboard/AssignmentProgressSummaryBox.vue";

const dashboardStore = useDashboardStore();

const courseSlug = computed(() => dashboardStore.currentDashboardConfig?.slug);
const courseName = computed(() => dashboardStore.currentDashboardConfig?.name);

const courseSessionProgress = computed(() => {
  return dashboardStore.currentDashBoardData as CourseProgressType;
});

const DEFAULT_ASSIGNMENT = {
  points_achieved_count: 0,
  points_max_count: 0,
  total_count: 0,
};
const DEFAULT_COMPETENCE = { total_count: 0, success_count: 0, fail_count: 0 };

const assignment = computed<ProgressDashboardAssignmentType>(
  () =>
    (courseSessionProgress.value?.assignment as ProgressDashboardAssignmentType) ??
    DEFAULT_ASSIGNMENT
);

const competence = computed<ProgressDashboardCompetenceType>(
  () =>
    (courseSessionProgress.value?.competence as ProgressDashboardCompetenceType) ??
    DEFAULT_COMPETENCE
);

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

const competenceCriteriaUrl = computed(() => {
  return `/course/${courseSlug.value}/competence/criteria?courseSessionId=${courseSessionProgress.value?.session_to_continue_id}`;
});
</script>

<template>
  <div
    v-if="courseSessionProgress && dashboardStore.currentDashboardConfig"
    class="mb-14 space-y-8"
  >
    <div class="flex flex-col space-y-7 bg-white p-6">
      <h3>{{ courseName }}</h3>
      <LearningPathDiagram
        v-if="courseSessionProgress.session_to_continue_id && courseSlug"
        :key="courseSlug"
        :course-slug="courseSlug"
        :course-session-id="courseSessionProgress.session_to_continue_id"
        diagram-type="horizontal"
      ></LearningPathDiagram>
      <div>
        <router-link
          class="btn-blue"
          :to="getLearningPathUrl(dashboardStore.currentDashboardConfig.slug)"
          :data-cy="`continue-course-${dashboardStore.currentDashboardConfig.id}`"
        >
          {{ $t("general.nextStep") }}
        </router-link>
      </div>
    </div>
    <div class="grid auto-rows-fr grid-cols-1 gap-8 xl:grid-cols-2">
      <AssignmentProgressSummaryBox
        :total-assignments="assignment.total_count"
        :achieved-points-count="assignment.points_achieved_count"
        :max-points-count="assignment.points_max_count"
        :details-link="competenceCertificateUrl"
      />
      <CompetenceSummaryBox
        :fail-count="competence.fail_count"
        :success-count="competence.success_count"
        :details-link="competenceCriteriaUrl"
      />
    </div>
  </div>
</template>
