<script setup lang="ts">
import DueDatesList from "@/components/dueDates/DueDatesList.vue";
import LearningPathDiagramSmall from "@/components/learningPath/LearningPathDiagramSmall.vue";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useUserStore } from "@/stores/user";
import type { CourseSession } from "@/types";
import log from "loglevel";
import { computed, onMounted } from "vue";

log.debug("DashboardPage created");

const userStore = useUserStore();
const courseSessionsStore = useCourseSessionsStore();

onMounted(async () => {
  log.debug("DashboardPage mounted");
});

const allDueDates = courseSessionsStore.allDueDates();
const getNextStepLink = (courseSession: CourseSession) => {
  return computed(() => {
    if (courseSessionsStore.hasCockpit(courseSession)) {
      return courseSession.cockpit_url;
    }
    return courseSession.learning_path_url;
  });
};
</script>

<template>
  <div class="flex flex-col lg:flex-row">
    <main class="grow bg-gray-200 lg:order-2">
      <div class="container-medium mt-14">
        <h1 data-cy="welcome-message">
          {{ $t("dashboard.welcome", { name: userStore.first_name }) }}
        </h1>
        <div
          v-if="courseSessionsStore.uniqueCourseSessionsByCourse.length > 0"
          class="mb-14"
        >
          <h2 class="mb-3 mt-12">{{ $t("dashboard.courses") }}</h2>

          <div class="grid auto-rows-fr grid-cols-1 gap-4 md:grid-cols-2">
            <div
              v-for="courseSession in courseSessionsStore.uniqueCourseSessionsByCourse"
              :key="courseSession.id"
            >
              <div class="bg-white p-6 md:h-full">
                <h3 class="mb-4">{{ courseSession.course.title }}</h3>
                <div>
                  <LearningPathDiagramSmall
                    class="mb-4"
                    :course-slug="courseSession.course.slug"
                  ></LearningPathDiagramSmall>
                </div>
                <div>
                  <router-link
                    class="btn-blue"
                    :to="getNextStepLink(courseSession).value"
                    :data-cy="`continue-course-${courseSession.course.id}`"
                  >
                    {{ $t("general.nextStep") }}
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="mb-14">
          <h2 class="mb-3 mt-12">{{ $t("dashboard.courses") }}</h2>
          <p>{{ $t("dashboard.nocourses") }}</p>
        </div>
        <div>
          <h3 class="mb-6">{{ $t("dashboard.dueDatesTitle") }}</h3>
          <DueDatesList
            class="bg-white p-6"
            :due-dates="allDueDates"
            :max-count="10"
            :show-top-border="false"
          ></DueDatesList>
        </div>
      </div>
    </main>
    <aside class="m-8 lg:order-1 lg:w-[343px]">
      <div class="mx-auto mb-6 pb-6 text-center">
        <img
          class="mb-4 inline-block max-w-[150px] rounded-full"
          :src="userStore.avatar_url"
        />
        <div>
          <p class="text-bold">{{ userStore.first_name }} {{ userStore.last_name }}</p>
          <p>{{ userStore.email }}</p>
        </div>
      </div>
    </aside>
  </div>
</template>

<style scoped></style>
