<script setup lang="ts">
import * as log from "loglevel";
import type { CompetenceCertificate } from "@/types";
import CompetenceAssignmentRow from "@/pages/competence/CompetenceAssignmentRow.vue";
import { computed } from "vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import {
  assignmentsMaxEvaluationPoints,
  assignmentsUserPoints,
  competenceCertificateProgressStatusCount,
} from "@/pages/competence/utils";

log.debug("CompetenceCertificateComponent setup");

const props = defineProps<{
  competenceCertificate: CompetenceCertificate;
  detailView: boolean;
}>();

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

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

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

const numAssignmentsTotal = computed(() => {
  return props.competenceCertificate.assignments.length;
});

const progressStatusCount = computed(() => {
  return competenceCertificateProgressStatusCount(
    props.competenceCertificate.assignments
  );
});
</script>

<template>
  <div>
    <div
      class="mb-4 bg-white p-8"
      :data-cy="`certificate-${competenceCertificate.slug}`"
    >
      <div class="flex flex-col lg:flex-row lg:items-center">
        <div
          v-if="numAssignmentsEvaluated < numAssignmentsTotal"
          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"
          :class="{ 'heading-2': props.detailView }"
        >
          {{ props.competenceCertificate.title }}
        </h3>
      </div>

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

      <ItProgress :status-count="progressStatusCount" />
      <div>
        {{
          $t("assignment.x von y Kompetenznachweis-Elementen abgeschlossen", {
            x: numAssignmentsEvaluated,
            y: numAssignmentsTotal,
          })
        }}
      </div>

      <div v-if="!props.detailView">
        <router-link
          :to="competenceCertificate.frontend_url"
          class="btn-text mt-4 inline-flex items-center py-2 pl-0"
          :data-cy="`certificate-${competenceCertificate.slug}-detail-link`"
        >
          <span>{{ $t("a.Details anzeigen") }}</span>
          <it-icon-arrow-right></it-icon-arrow-right>
        </router-link>
      </div>
    </div>

    <div v-if="props.detailView">
      <div
        v-for="(assignment, index) in competenceCertificate.assignments"
        :key="assignment.id"
        class="bg-white px-8"
      >
        <CompetenceAssignmentRow
          :assignment="assignment"
          :add-border-bottom="index < competenceCertificate.assignments.length - 1"
        ></CompetenceAssignmentRow>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
