<script setup lang="ts">
import { useCourseSessionDetailQuery } from "@/composables";
import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
import CirclePage from "@/pages/learningPath/circlePage/CirclePage.vue";
import * as log from "loglevel";
import { computed, onMounted } from "vue";

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

log.debug("CockpitUserCirclePage created", props.userId, props.circleSlug);

const { loading } = useExpertCockpitPageData(props.courseSlug);

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

const { findUser } = useCourseSessionDetailQuery();

const user = computed(() => {
  return findUser(props.userId);
});
</script>

<template>
  <CirclePage
    v-if="user && !loading"
    :course-slug="props.courseSlug"
    :circle-slug="props.circleSlug"
    :profile-user="user"
    :readonly="true"
  ></CirclePage>
</template>

<style scoped></style>
