<script setup lang="ts">
import type { CompetenceCertificateAssignment } from "@/types";
import * as log from "loglevel";

log.debug("CompetenceAssignmentRow setup");

export interface Props {
  assignment: CompetenceCertificateAssignment;
  addBorderBottom?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  addBorderBottom: false,
});

const getIconName = () => {
  if (props.assignment.assignment_type === "EDONIQ_TEST") {
    return "it-icon-test-large";
  }
  return "it-icon-assignment-large";
};
</script>

<template>
  <div
    class="flex flex-col gap-4 py-8 lg:flex-row lg:items-center lg:gap-0"
    :class="{ 'border-b': props.addBorderBottom }"
    :data-cy="`assignment-${assignment.slug}`"
  >
    <component :is="getIconName()" class="mr-4 hidden h-9 w-9 lg:block"></component>
    <div class="flex flex-col lg:w-[420px]">
      <h3 class="text-bold flex items-center gap-2">{{ assignment.title }}</h3>
      <p class="text-gray-800">
        <a
          v-if="assignment.learning_content"
          :href="assignment.frontend_url"
          class="link"
          data-cy="open-learning-content"
        >
          {{
            $t("general.im circle x anschauen", {
              x: assignment.learning_content.circle.title,
            })
          }}
        </a>
        <span v-else>Fehler, Lerninhalt nicht korrekt verknüpft</span>
      </p>
    </div>
    <div class="grow lg:px-8">
      <div
        v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
        class="flex items-center"
      >
        <div
          class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500 bg-green-500"
        >
          <it-icon-check class="h-4/5 w-4/5"></it-icon-check>
        </div>
        <div class="ml-2">{{ $t("a.Bewertung freigegeben") }}</div>
      </div>
      <div
        v-else-if="
          ['EVALUATION_IN_PROGRESS', 'SUBMITTED'].includes(
            assignment.completion?.completion_status || ''
          )
        "
        class="flex items-center"
      >
        <div
          class="relative flex h-7 w-7 items-center justify-center rounded-full border border-green-500"
        >
          <it-icon-check class="h-6 w-6"></it-icon-check>
        </div>
        <div class="ml-2">{{ $t("a.Ergebnisse abgegeben") }}</div>
      </div>
    </div>
    <div>
      <div
        v-if="assignment.completion?.completion_status === 'EVALUATION_SUBMITTED'"
        class="flex flex-col lg:items-center"
      >
        <div class="flex flex-col lg:items-center">
          <div class="heading-2">
            {{ assignment.completion?.evaluation_points }}
          </div>
          <div>
            {{ $t("assignment.von x Punkten", { x: assignment.max_points }) }}
            ({{
              (
                ((assignment.completion?.evaluation_points ?? 0) /
                  (assignment.completion?.evaluation_max_points ?? 1)) *
                100
              ).toFixed(0)
            }}%)
          </div>
          <div
            v-if="assignment.completion && !assignment.completion.evaluation_passed"
            class="my-2 rounded-md bg-error-red-200 px-2.5 py-0.5"
          >
            {{ $t("a.Nicht Bestanden") }}
          </div>
        </div>
      </div>
      <div v-else class="flex flex-col lg:items-center">
        <div>{{ $t("a.Höchstpunktzahl") }}</div>
        <div>{{ assignment.max_points }} {{ $t("a.Punkte") }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
