<script setup lang="ts">
import { useDashboardStore } from "@/stores/dashboard";
import { DASHBOARD_COURSE_SESSION_PROGRESS } from "@/graphql/queries";
import { useQuery } from "@urql/vue";
import { computed } from "vue";
import { getLearningPathUrl } from "@/utils/utils";
import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";

const dashboardStore = useDashboardStore();
const courseId = computed(() => dashboardStore.currentDashboardConfig?.id);
const courseSlug = computed(() => dashboardStore.currentDashboardConfig?.slug || "");

const progressQuery = useQuery({
  query: DASHBOARD_COURSE_SESSION_PROGRESS,
  variables: {
    // @ts-ignore
    courseId,
  },
});

const progress = progressQuery.data;
</script>

<template>
  <div v-if="progress?.course_progress && dashboardStore.currentDashboardConfig">
    <div class="mb-14">
      <h2 class="mb-3 mt-12">{{ $t("dashboard.courses") }}</h2>

      <div class="bg-white p-6 md:h-full">
        <h3 class="mb-4">{{ dashboardStore.currentDashboardConfig.name }}</h3>
        <div>
          <LearningPathDiagram
            :key="courseSlug"
            class="mb-4"
            :course-slug="courseSlug"
            :course-session-id="progress.course_progress.session_to_continue_id"
            diagram-type="horizontalSmall"
          ></LearningPathDiagram>
        </div>
        <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>
  </div>
</template>
