<script setup lang="ts">
import log from "loglevel";
import { computed, onMounted } from "vue";
import type { CompetenceCertificate } from "@/types";
import { useCertificateQuery } from "@/composables";
import CompetenceCertificateComponent from "@/pages/competence/CompetenceCertificateComponent.vue";
import {
  assignmentsUserPoints,
  calcCompetencesTotalGrade,
} from "@/pages/competence/utils";
import { useRoute } from "vue-router";
import { getCertificates } from "@/services/competence";

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

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

const route = useRoute();

const certificatesQuery = useCertificateQuery(
  props.userId,
  props.courseSlug
).certificatesQuery;

const competenceCertificates = computed(() => {
  const certificates = getCertificates(
    certificatesQuery.data.value,
    props.userId ?? null
  );

  if (!certificates) {
    return null;
  }

  return (
    (certificates?.competence_certificates as unknown as CompetenceCertificate[]) ?? []
  );
});

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

const totalGrade = computed(() => {
  return calcCompetencesTotalGrade(competenceCertificates.value ?? []);
});

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

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

const certificateFrontendUrl = function (frontendUrl: string) {
  if (props.userId) {
    const pathSegments = frontendUrl.split("/");
    const lastSegment = pathSegments[pathSegments.length - 1];

    // Assuming you want to navigate to the current path + last segment
    return `${route.path}/${lastSegment}`;
  }
  return frontendUrl;
};

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

<template>
  <div v-if="assignments" 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">
          {{ totalGrade }}
        </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"
        :frontend-url="certificateFrontendUrl(competenceCertificate.frontend_url)"
      ></CompetenceCertificateComponent>
    </div>
  </div>
</template>

<style scoped></style>
