<script setup lang="ts">
import { useCurrentCourseSession } from "@/composables";
import * as log from "loglevel";
import { onMounted, ref } from "vue";
import { fetchDashboardPersons } from "@/services/dashboard";
import AgentAssignmentDetail from "@/pages/dashboard/agentAssignment/AgentAssignmentDetail.vue";

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

log.debug("AgentAssignmentDetailPage created", props.courseSlug, props.agentRole);

const courseSession = useCurrentCourseSession();

const loading = ref(true);
const participantUserIds = ref<string[]>([]);

onMounted(async () => {
  log.debug("AgentAssignmentDetailPage mounted", courseSession);

  const personData = await fetchDashboardPersons("default");
  const participants = personData?.filter((p) => {
    return p.course_sessions.find(
      (cs) => cs.id === courseSession.value.id && cs.my_role === "BERUFSBILDNER"
    );
  });
  participantUserIds.value = participants?.map((p) => p.user_id);
  loading.value = false;
});
</script>

<template>
  <AgentAssignmentDetail
    v-if="participantUserIds.length"
    :assignment-id="props.assignmentId"
    :agent-role="props.agentRole"
    :course-slug="props.courseSlug"
    :participant-user-ids="participantUserIds"
  />
</template>

<style scoped></style>
