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

import CompetenceDetail from "@/components/competences/CompetenceDetail.vue";
import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";

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

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

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

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

const learningPath = computed(() => {
  return learningPathStore.learningPathForUser(props.courseSlug, props.userId);
});

const user = computed(() => {
  return cockpitStore.courseSessionUsers?.find(
    (csu) => csu.user_id === Number(props.userId)
  );
});

function setActiveClasses(isActive: boolean) {
  return isActive ? ["border-blue-900", "border-b-2"] : ["text-bg-900"];
}
</script>

<template>
  <div class="bg-gray-200">
    <div v-if="user" class="container-large">
      <nav class="py-4 pb-4">
        <router-link
          class="btn-text inline-flex items-center pl-0"
          :to="`/course/${props.courseSlug}/cockpit`"
        >
          <it-icon-arrow-left />
          <span>{{ $t("general.back") }}</span>
        </router-link>
      </nav>
      <header class="mb-12 flex flex-row items-center">
        <img class="mr-8 h-44 w-44 rounded-full" :src="user.avatar_url" />
        <div>
          <h1 class="mb-2">{{ user.first_name }} {{ user.last_name }}</h1>
          <p class="mb-2">{{ user.email }}</p>
          <p class="bg-message bg-[center_left_-4px] bg-no-repeat pl-6">
            {{ $t("messages.sendMessage") }}
          </p>
        </div>
      </header>
      <main>
        <div v-if="learningPath" class="mb-8 w-full bg-white pb-1 pt-2">
          <!-- TODO: rework this section with next redesign -->
          <LearningPathPathView
            :use-mobile-layout="false"
            :hide-buttons="true"
            :learning-path="learningPath"
          ></LearningPathPathView>
        </div>
        <ul class="mb-5 flex flex-row border-b-2">
          <li class="relative top-px mr-12 pb-3" :class="setActiveClasses(true)">
            <button>{{ $t("competences.competences") }}</button>
          </li>
          <li class="mr-12">
            <button>{{ $t("general.transferTask", 2) }}</button>
          </li>
          <li class="mr-12">
            <button>{{ $t("general.exam", 2) }}</button>
          </li>
          <li class="mr-12">
            <button>{{ $t("general.certificate", 2) }}</button>
          </li>
        </ul>
        <div>
          <ul
            v-if="competenceStore.competenceProfilePage(user.user_id)"
            class="bg-white px-8"
          >
            <li
              v-for="competence in competenceStore.competences(user.user_id)"
              :key="competence.id"
              class="border-b border-gray-500 p-8 last:border-0"
            >
              <CompetenceDetail
                :competence="competence"
                :course-slug="props.courseSlug"
                :show-assess-again="false"
                :is-inline="true"
              ></CompetenceDetail>
            </li>
          </ul>
        </div>
      </main>
    </div>
  </div>
</template>

<style scoped></style>
