<script setup lang="ts">
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 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>
          <h3 class="mb-6">Termine</h3>
          <ul class="bg-white p-4">
            <li class="flex flex-row py-4">
              {{ $t("Zur Zeit sind keine Termine vorhanden") }}
            </li>
            <!-- li class="flex flex-row border-b py-4">
              <p class="text-bold w-60">Austausch mit Trainer</p>
              <p class="grow">Fr, 24. November 2022, 11 Uhr</p>
              <p class="underline">Details anschauen</p>
            </li>
            <li class="flex flex-row py-4">
              <p class="text-bold w-60">Vernetzen - Live Session</p>
              <p class="grow">Di, 4. Dezember 2022, 10.30 Uhr</p>
              <p class="underline">Details anschauen</p>
            </li -->
          </ul>
        </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>
