<script setup lang="ts">
import {
  maxAssignmentPoints,
  pointsToGrade,
  userAssignmentPoints,
} from "@/services/assignmentService";
import { useAssignmentStore } from "@/stores/assignmentStore";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import type { Assignment, AssignmentEvaluationTask, CourseSessionUser } from "@/types";
import { AssignmentCompletion } from "@/types";
import { Dayjs } from "dayjs";
import * as log from "loglevel";
import { computed } from "vue";

const props = defineProps<{
  assignmentUser: CourseSessionUser;
  assignment: Assignment;
  assignmentCompletion: AssignmentCompletion;
  dueDate?: Dayjs;
}>();

const emit = defineEmits(["submitEvaluation", "editTask"]);

log.debug("EvaluationSummary setup");

const courseSessionStore = useCourseSessionsStore();
const assignmentStore = useAssignmentStore();

async function submitEvaluation() {
  log.debug("submitEvaluation");
  await assignmentStore.evaluateAssignmentCompletion({
    assignment_user_id: Number(props.assignmentUser.user_id),
    assignment_id: props.assignment.id,
    course_session_id: courseSessionStore.currentCourseSession!.id,
    completion_data: {},
    completion_status: "evaluation_submitted",
  });
  emit("submitEvaluation");
}

function subTaskByPoints(task: AssignmentEvaluationTask, points = 0) {
  return task.value.sub_tasks.find((subTask) => subTask.points === points);
}

function evaluationForTask(task: AssignmentEvaluationTask) {
  const expertData = props.assignmentCompletion.completion_data[task.id]?.expert_data;
  if (task.id === "0e701176-a817-427b-b8ea-a7cd59f212cb") {
    console.log("######################## ", expertData.text, expertData.points);
  }
  if (!expertData) {
    return {
      points: 0,
      text: "",
    };
  }

  return expertData;
}

const maxPoints = computed(() => maxAssignmentPoints(props.assignment));
const userPoints = computed(() =>
  userAssignmentPoints(props.assignment, props.assignmentCompletion)
);
const grade = computed(() => pointsToGrade(userPoints.value, maxPoints.value));
</script>

<template>
  <div>
    <h3>Bewertung Freigabe</h3>

    <section class="mb-6 border p-6">
      <div class="text-lg font-bold">Note: {{ grade }}</div>
      <div>Gesamtpunktezahl {{ userPoints }} / {{ maxPoints }}</div>

      <p class="my-4">
        Die Gesamtpunktzahl und die daraus resultierende Note wird auf Grund des
        hinterlegeten Beurteilungsinstrument berechnet. Willst du mehr dazu erfahren:
      </p>

      <div>
        <button class="btn-primary" @click="submitEvaluation()">
          Bewertung freigeben
        </button>
      </div>
    </section>

    <section>
      <div v-for="(task, index) in props.assignment.evaluation_tasks" :key="task.id">
        <article class="border-t py-4">
          <div class="flex flex-row justify-between">
            <div class="mb-4">
              Bewertungskriterium {{ index + 1 }}: {{ task.value.title }}
            </div>
            <div>
              <button
                class="link pl-2text-sm whitespace-nowrap"
                @click="emit('editTask', task)"
              >
                {{ $t("assignment.edit") }}
              </button>
            </div>
          </div>

          <div class="default-wagtail-rich-text mb-2 font-bold">
            {{ task.value.description }}
          </div>

          <section class="mb-4">
            <div
              v-html="subTaskByPoints(task, evaluationForTask(task).points).title"
            ></div>
            <p
              class="default-wagtail-rich-text"
              v-html="subTaskByPoints(task, evaluationForTask(task).points).description"
            ></p>
            <div class="text-sm text-gray-800">
              {{ evaluationForTask(task).points }} Punkte
            </div>
          </section>

          <div>
            <span class="font-bold">Begründung:</span>
            {{ evaluationForTask(task).text }}
          </div>
        </article>
      </div>
    </section>
  </div>
</template>

<style lang="scss" scoped></style>
