<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.indexOf("eiger-versicherungen.ch") > -1
    ? "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="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">Kurse</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="courseSession.learning_path_url"
                    :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 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="m-8 lg:order-1 lg:w-[343px]">
      <div class="mx-auto mb-6 border-b 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>
          <p class="mb-4">{{ employer() }}</p>
          <p>
            Profil bearbeiten
            <it-icon-pen class="h-4 w-4"></it-icon-pen>
          </p>
        </div>
      </div>
      <div>
        <div class="mb-4 flex flex-row items-center justify-start">
          <div class="w-20">
            <div class="h-12 w-12 rounded-full bg-sky-200">
              <it-icon-certificate
                class="mx-auto block h-6 w-6 pt-2"
              ></it-icon-certificate>
            </div>
          </div>
          <h4 class="text-bold">Zertifikate</h4>
        </div>
      </div>
      <div>
        <div>
          <div class="mb-4 flex flex-row justify-start">
            <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-bold text-green-500">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>
