<script setup lang="ts">
import * as log from "loglevel";

import { useLearningPathStore } from "@/stores/learningPath";
import { useUserStore } from "@/stores/user";
import { computed, onMounted } from "vue";

import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import LearningPathViewVertical from "@/components/learningPath/LearningPathViewVertical.vue";
import type { LearningPath } from "@/services/learningPath";

log.debug("LearningPathView created");

const props = defineProps<{
  courseSlug: string;
}>();

const learningPathStore = useLearningPathStore();
const userStore = useUserStore();

const learningPath = computed(() => {
  if (userStore.loggedIn && learningPathStore.learningPaths.size > 0) {
    const learningPathKey = `${props.courseSlug}-lp-${userStore.id}`;
    return learningPathStore.learningPaths.get(learningPathKey);
  }

  return undefined;
});

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

  try {
    await learningPathStore.loadLearningPath(props.courseSlug + "-lp");
  } catch (error) {
    log.error(error);
  }
});

const createContinueUrl = (learningPath: LearningPath): [string, boolean] => {
  if (learningPath?.nextLearningContent) {
    const circle = learningPath.nextLearningContent.parentCircle;
    const url =
      learningPath.nextLearningContent.parentLearningSequence?.frontend_url ||
      circle.frontend_url;
    const isFirst =
      learningPath.nextLearningContent.translation_key ===
      learningPath.circles[0].flatLearningContents[0].translation_key;
    return [url, isFirst];
  }

  return ["", false];
};
</script>

<template>
  <div v-if="learningPath" class="bg-gray-200">
    <Teleport to="body">
      <LearningPathViewVertical
        :show="learningPathStore.page === 'OVERVIEW'"
        :learning-path="learningPath"
        @closemodal="learningPathStore.page = 'INDEX'"
      />
    </Teleport>

    <div class="learningpath flex flex-col">
      <div class="flex flex-col h-max">
        <div class="bg-white lg:py-8 flex flex-col">
          <div class="flex justify-end lg:p-4">
            <button
              class="btn-text inline-flex items-center px-3 lg:py-2"
              data-cy="show-list-view"
              @click="learningPathStore.page = 'OVERVIEW'"
            >
              <it-icon-list />
              {{ $t("learningPathPage.showListView") }}
            </button>
          </div>
          <LearningPathDiagram
            class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
            diagram-type="horizontal"
            :learning-path="learningPath"
          ></LearningPathDiagram>
        </div>

        <div class="container-large pt-0 lg:pt-4">
          <h1 data-cy="learning-path-title" class="mt-6 lg:mt-12 mb-6">
            {{ learningPath.title }}
          </h1>
          <div
            class="bg-white p-4 lg:mb-16 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
          >
            <div class="p-2 lg:p-8 flex-auto">
              <h2>
                {{ $t("learningPathPage.welcomeBack", { name: userStore.first_name }) }}
              </h2>
              <p class="mt-4 text-xl"></p>
            </div>
            <div v-if="learningPath.nextLearningContent" class="p-4 lg:p-8 flex-2">
              {{ $t("learningPathPage.nextStep") }}
              <h3>
                {{ learningPath.nextLearningContent.parentCircle.title }}:
                {{ learningPath.nextLearningContent.parentLearningSequence?.title }}
              </h3>
              <router-link
                class="mt-4 btn-blue"
                :to="createContinueUrl(learningPath)[0]"
                data-cy="lp-continue-button"
                translate
              >
                <span v-if="createContinueUrl(learningPath)[1]">
                  {{ $t("general.start") }}
                </span>
                <span v-else>{{ $t("general.nextStep") }}</span>
              </router-link>
            </div>
          </div>
        </div>
        <div class="topic"></div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
