<script setup lang="ts">
import BaseBox from "@/components/dashboard/BaseBox.vue";
import type { BaseStatisticsType } from "@/gql/graphql";
import {
  type DashboardRoleKeyType,
  fetchMentorCompetenceSummary,
} from "@/services/dashboard";
import { computed, onMounted, ref } from "vue";

const props = defineProps<{
  courseId: string;
  agentRole: DashboardRoleKeyType;
}>();

const mentorAssignmentData = ref<BaseStatisticsType | null>(null);

const summary = computed(() => {
  return mentorAssignmentData.value?.assignments ?? null;
});

const courseSlug = computed(() => mentorAssignmentData.value?.course_slug);

onMounted(async () => {
  mentorAssignmentData.value = await fetchMentorCompetenceSummary(
    props.courseId,
    props.agentRole
  );
});
</script>

<template>
  <div v-if="summary" class="w-60 sm:w-[325px]">
    <BaseBox
      :details-link="`/statistic/${props.agentRole}/${courseSlug}/assignment`"
      data-cy="dashboard.mentor.competenceSummary"
    >
      <template #title>{{ $t("Kompetenznachweise") }}</template>
      <template #content>
        <div class="flex flex-row space-x-3 bg-white">
          <div
            class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
          >
            <span>{{ summary.summary.total_passed }}</span>
          </div>
          <p class="ml-3 mt-0 leading-[47px]">{{ $t("Bestanden") }}</p>
        </div>
        <div class="flex flex-row space-x-3 bg-white pb-6">
          <div
            class="flex h-[47px] items-center justify-center py-1 pr-3 text-3xl font-bold"
          >
            <span>{{ summary.summary.total_failed }}</span>
          </div>
          <p class="ml-3 mt-0 leading-[47px]">{{ $t("Nicht bestanden") }}</p>
        </div>
      </template>
    </BaseBox>
  </div>
</template>
