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

log.debug("DashboardPage created");

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

function employer() {
  return userStore.email === "bianca.muster@eiger-versicherungen.ch"
    ? "Eiger Versicherungen, Niederlassung Bern"
    : "VBV";
}

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

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

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-fr">
            <div
              v-for="courseSession in courseSessionsStore.coursesFromCourseSessions"
              :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="courseSession.learning_path_url">
                    {{ $t("general.nextStep") }}
                  </router-link>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <h3 class="mb-6">Termine</h3>
          <ul class="p-4 bg-white">
            <li class="flex flex-row border-b py-4">
              <p class="text-bold w-60">Prüfung</p>
              <p class="grow">Mo, 14. November 2022, 18 Uhr</p>
              <p class="underline">Details anschauen</p>
            </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="lg:w-[343px] m-8 lg:order-1">
      <div class="mx-auto text-center pb-6 mb-6 border-b">
        <img
          class="rounded-full inline-block max-w-[150px] mb-4"
          :src="userStore.avatar_url"
        />
        <div>
          <p class="text-bold">{{ userStore.first_name }} {{ userStore.last_name }}</p>
          <p>{{ userStore.email }}</p>
          <p class="mb-4">{{ employer() }}</p>
          <p>
            Profil bearbeiten
            <it-icon-pen class="w-4 h-4"></it-icon-pen>
          </p>
        </div>
      </div>
      <div>
        <div class="flex flex-row items-center mb-4 justify-start">
          <div class="w-20">
            <div class="rounded-full bg-sky-200 h-12 w-12">
              <it-icon-certificate
                class="h-6 w-6 block mx-auto pt-2"
              ></it-icon-certificate>
            </div>
          </div>
          <h4 class="text-bold">Zertifikate</h4>
        </div>
      </div>
      <div>
        <div>
          <div class="flex flex-row justify-start mb-4">
            <p class="text-bold w-20">2024</p>
            <div>
              <p class="text-bold">Check-up</p>
              <p>Vermittler/-in VBV</p>
              <p>
                Gültig bis:
                <span class="text-green-500 text-bold">31.12.2026</span>
              </p>
            </div>
          </div>
        </div>
        <div class="flex flex-row justify-start">
          <p class="text-bold w-20">2022</p>
          <div>
            <p class="text-bold">Zulassungsprüfung</p>
            <p>Vermittler/-in VBV</p>
            <p>
              Bestanden:
              <span class="text-bold">14.11.2022</span>
            </p>
          </div>
        </div>
      </div>
    </aside>
  </div>
</template>

<style scoped></style>
