<script setup lang="ts">
import * as log from "loglevel";
import { computed, onMounted } from "vue";

import CompetenceDetail from "@/pages/competence/ActionCompetenceDetail.vue";
import LearningPathPathView from "@/pages/learningPath/learningPathPage/LearningPathPathView.vue";
import {
  useCourseSessionDetailQuery,
  useCourseDataWithCompletion,
} from "@/composables";

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

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

const courseCompletionData = useCourseDataWithCompletion(
  props.courseSlug,
  props.userId
);

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

const lpQueryResult = useCourseDataWithCompletion(props.courseSlug, props.userId);

const learningPath = computed(() => {
  return lpQueryResult.learningPath.value;
});

const { findUser } = useCourseSessionDetailQuery();

const user = computed(() => {
  return findUser(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"
            :next-learning-content="undefined"
            :override-circle-url-base="`/course/${props.courseSlug}/cockpit/profile/${props.userId}`"
          ></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_other") }}</button>
          </li>
          <li class="mr-12">
            <button>{{ $t("general.exam_other") }}</button>
          </li>
          <li class="mr-12">
            <button>{{ $t("general.certificate_other") }}</button>
          </li>
        </ul>
        <div>
          <ul class="bg-white px-8">
            <li
              v-for="competence in courseCompletionData.actionCompetences.value ?? []"
              :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>
