<script setup lang="ts">
import log from "loglevel";
import { COMPETENCE_NAVI_CERTIFICATE_QUERY } from "@/graphql/queries";
import { useQuery } from "@urql/vue";
import { computed, onMounted } from "vue";
import type { CompetenceCertificate } from "@/types";
import { useCurrentCourseSession } from "@/composables";
import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
import {
  assignmentsMaxEvaluationPoints,
  assignmentsUserPoints,
} from "@/pages/competence/utils";

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

log.debug("CompetenceCertificateListPage setup", props);

const courseSession = useCurrentCourseSession();

const certificatesQuery = useQuery({
  query: COMPETENCE_NAVI_CERTIFICATE_QUERY,
  variables: {
    courseSlug: props.courseSlug,
    courseSessionId: courseSession.value.id,
  },
});

const competenceCertificates = computed(() => {
  return (
    (certificatesQuery.data.value?.competence_certificate_list
      ?.competence_certificates as unknown as CompetenceCertificate[]) ?? []
  );
});

const assignments = computed(() => {
  return competenceCertificates.value.flatMap((cc) => cc.assignments);
});

const totalPointsEvaluatedAssignments = computed(() => {
  return assignmentsMaxEvaluationPoints(assignments.value);
});

const userPointsEvaluatedAssignments = computed(() => {
  return assignmentsUserPoints(assignments.value);
});

const numAssignmentsEvaluated = computed(() => {
  return assignments.value.filter((a) => {
    return a.completion?.completion_status === "EVALUATION_SUBMITTED";
  }).length;
});

onMounted(async () => {
  // log.debug("AssignmentView mounted", props.assignmentId, props.userId);
});
</script>

<template>
  <div class="container-large">
    <h2 class="mb-4 lg:py-4">{{ $t("a.Kompetenznachweise") }}</h2>

    <div class="mb-4 bg-white p-8" data-cy="certificate-total-points-text">
      <div class="flex flex-col lg:flex-row lg:items-center">
        <div
          v-if="numAssignmentsEvaluated < assignments.length"
          class="rounded-full bg-gray-200 px-2.5 py-0.5 text-sm lg:ml-2"
        >
          {{ $t("a.Zwischenstand") }}
        </div>
        <h3 class="mt-2 lg:order-first lg:mt-0">{{ $t("a.Gesamtpunktzahl") }}</h3>
      </div>

      <section v-if="userPointsEvaluatedAssignments > 0" class="flex items-center">
        <div class="heading-1 py-4">
          {{ userPointsEvaluatedAssignments }}
        </div>
        <div class="pl-2">
          {{ $t("assignment.von x Punkten", { x: totalPointsEvaluatedAssignments }) }}
        </div>
      </section>
      <section v-else class="my-4">
        {{ $t("a.competenceCertificateNoUserPoints") }}
      </section>
    </div>

    <div
      v-for="competenceCertificate in competenceCertificates"
      :key="competenceCertificate.id"
    >
      <CompetenceCertificateComponent
        :competence-certificate="competenceCertificate"
        :detail-view="false"
      ></CompetenceCertificateComponent>
    </div>
  </div>
</template>

<style scoped></style>
