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

import { useLearningPathStore } from "@/stores/learningPath";
import { useUserStore } from "@/stores/user";
import { 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<{
  learningPathSlug: string;
}>();

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

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

  try {
    await learningPathStore.loadLearningPath(props.learningPathSlug);
  } 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="learningPathStore.learningPath" class="bg-gray-200">
    <Teleport to="body">
      <LearningPathViewVertical
        :show="learningPathStore.page === 'OVERVIEW'"
        :learning-path-slug="props.learningPathSlug"
        @closemodal="learningPathStore.page = 'INDEX'"
      />
    </Teleport>

    <div class="learningpath flex flex-col">
      <div class="flex flex-col h-max">
        <div class="bg-white py-8 flex flex-col">
          <div class="flex justify-end p-3">
            <button
              class="flex items-center"
              data-cy="show-list-view"
              @click="learningPathStore.page = 'OVERVIEW'"
            >
              <it-icon-list />
              Listenansicht anzeigen
            </button>
          </div>
          <LearningPathDiagram
            class="max-w-[1680px] w-full"
            identifier="mainVisualization"
            :vertical="false"
          ></LearningPathDiagram>
        </div>

        <div class="container-large">
          <h1 data-cy="learning-path-title" class="mt-6 lg:mt-12 mb-6">
            {{ learningPathStore.learningPath.title }}
          </h1>
          <div
            class="bg-white p-4 flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-gray-500 justify-start"
          >
            <div class="p-4 lg:p-8 flex-auto">
              <h2>Willkommmen zurück, {{ userStore.first_name }}</h2>
              <p class="mt-4 text-xl"></p>
            </div>
            <div
              v-if="learningPathStore.learningPath.nextLearningContent"
              class="p-4 lg:p-8 flex-2"
            >
              Nächster Schritt
              <h3>
                {{
                  learningPathStore.learningPath.nextLearningContent.parentCircle.title
                }}:
                {{
                  learningPathStore.learningPath.nextLearningContent
                    .parentLearningSequence?.title
                }}
              </h3>
              <router-link
                class="mt-4 btn-blue"
                :to="createContinueUrl(learningPathStore.learningPath)[0]"
                data-cy="lp-continue-button"
                translate
              >
                <span v-if="createContinueUrl(learningPathStore.learningPath)[1]">
                  Los geht's
                </span>
                <span v-else>Weiter geht's</span>
              </router-link>
            </div>
          </div>
        </div>
        <div class="topic"></div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
