<script setup lang="ts">
import CockpitProfileContent from "@/components/userProfile/UserProfileContent.vue";
import { useCurrentCourseSession } from "@/composables";
import { useRoute } from "vue-router";

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

interface SubMenuItem {
  label: string;
  url: string;
  inMenu: boolean;
  routeMatch: string[];
}

const SUBPAGES: SubMenuItem[] = [
  {
    label: "a.Übersicht",
    url: `/course/${props.courseSlug}/profile/${props.userId}/competence`,
    inMenu: true,
    routeMatch: ["competenceMain"],
  },
  {
    label: useCurrentCourseSession().value.course.configuration.is_vv
      ? "a.Selbst- und Fremdeinschätzungen"
      : "a.Selbsteinschätzungen",
    url: `/course/${props.courseSlug}/profile/${props.userId}/competence/evaluations`,
    inMenu: true,
    routeMatch: ["competenceEvaluations"],
  },
];

if (useCurrentCourseSession().value.course.configuration.is_uk) {
  SUBPAGES.push(
    {
      label: "Kompetenznachweise",
      url: `/course/${props.courseSlug}/profile/${props.userId}/competence/certificates`,
      inMenu: true,
      routeMatch: ["competenceCertificates", "competenceCertificateDetail"],
    },
    {
      label: "",
      url: "",
      inMenu: false,
      routeMatch: [],
    }
  );
}

function convertRouteRecordNameToString(
  routeRecordName: string | symbol | undefined
): string {
  if (!routeRecordName) {
    return "";
  }
  if (typeof routeRecordName === "symbol") {
    // Convert symbol to string explicitly
    return routeRecordName.toString();
  } else {
    // It's already a string, return as is
    return routeRecordName;
  }
}

const route = useRoute();
</script>

<template>
  <CockpitProfileContent>
    <template #side>
      <div
        v-for="(entry, index) in SUBPAGES.filter((p) => p.inMenu)"
        :key="index"
        class="mb-2"
      >
        <router-link
          :to="entry.url"
          class="flex w-full items-center space-x-2 p-2 pr-4 text-blue-900 hover:bg-gray-200 lg:pr-8"
          :class="{
            'text-bold bg-gray-200': route.matched.some((record) =>
              entry.routeMatch.includes(convertRouteRecordNameToString(record?.name))
            ),
          }"
        >
          <span>{{ $t(entry.label) }}</span>
        </router-link>
      </div>
    </template>
    <template #main>
      <div class="container-large">
        <router-view
          :profile-user-id="props.userId"
          :user-id="props.userId"
          :course-slug="useCurrentCourseSession().value.course.slug"
          :certificate-slug="certificateSlug ? certificateSlug : ''"
        ></router-view>
      </div>
    </template>
  </CockpitProfileContent>
</template>
