<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useTranslation } from "i18next-vue";
import { useFetch } from "@vueuse/core";
import { useCurrentCourseSession } from "@/composables";

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

const { t } = useTranslation();

const pages = ref([
  {
    label: t("general.learningPath"),
    route: "profileLearningPath",
    routeMatch: "profileLearningPath",
  },
  {
    label: t("a.KompetenzNavi"),
    route: "competenceMain",
    routeMatch: "profileCompetence",
  },
]);

const courseSession = useCurrentCourseSession();
const { data: user } = useFetch(
  `/api/core/profile/${courseSession.value.id}/${props.userId}`
).json();

const route = useRoute();
const router = useRouter();

onMounted(() => {
  // if current route name not in pages, redirect to first page
  if (route.name && !pages.value.find((page) => page.route === route.name)) {
    router.push({
      name: pages.value[0].route,
      params: { userId: props.userId, courseSlug: props.courseSlug },
    });
  }
});
</script>

<template>
  <div v-if="user" class="flex flex-col bg-gray-200">
    <div class="relative border-b bg-white shadow-md">
      <div class="container-large pb-0">
        <div class="mb-12 mt-2 flex items-center">
          <img class="mr-8 h-48 w-48 rounded-full" :src="user.avatar_url" />
          <div class="flex flex-col">
            <h2 class="mb-2">{{ user.first_name }} {{ user.last_name }}</h2>
            <p class="mb-2">{{ user.email }}</p>
            <p class="text-gray-800">{{ $t("a.Teilnehmer") }}</p>
          </div>
        </div>
      </div>
      <ul class="flex flex-row px-4 lg:px-8">
        <li
          v-for="page in pages"
          :key="page.route"
          class="relative top-px mr-12 pb-3"
          :class="[
            route.matched.some((record) => record.name === page.routeMatch)
              ? 'border-b-2 border-blue-900 pb-3'
              : '',
          ]"
        >
          <router-link :to="{ name: page.route }">
            {{ page.label }}
          </router-link>
        </li>
      </ul>
    </div>
    <router-view class="flex flex-grow py-0" />
  </div>
</template>
