<script setup lang="ts">
import { useCockpitStore } from "@/stores/cockpit";
import { useLearningPathStore } from "@/stores/learningPath";
import * as log from "loglevel";
import { computed, onMounted } from "vue";

import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";

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

log.debug("CockpitUserProfilePage created", props.userId);

const cockpitStore = useCockpitStore();
const learningPathStore = useLearningPathStore();

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

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

  return undefined;
});

function courseSessionUser() {
  return cockpitStore.courseSessionUsers?.find(
    (csu) => csu.user_id === Number(props.userId)
  );
}
</script>

<template>
  <div class="bg-gray-200">
    <div class="container-large">
      <div class="flex">
        <img
          class="rounded-full inline-block max-w-[150px] mb-4"
          :src="courseSessionUser()?.avatar_url"
        />
      </div>
      <div v-if="learningPath">
        <LearningPathDiagram
          class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
          diagram-type="horizontal"
          :learning-path="learningPath"
          :postfix="userId"
        ></LearningPathDiagram>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
