<script setup lang="ts">
import { useCurrentCourseSession } from "@/composables";
import { UPSERT_ASSIGNMENT_COMPLETION_MUTATION } from "@/graphql/mutations";
import type { Assignment, AssignmentCompletion, CourseSessionUser } from "@/types";
import { useMutation } from "@urql/vue";
import dayjs, { Dayjs } from "dayjs";
import * as log from "loglevel";

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

const emit = defineEmits(["startEvaluation"]);

log.debug("EvaluationIntro setup");

const courseSession = useCurrentCourseSession();

const upsertAssignmentCompletionMutation = useMutation(
  UPSERT_ASSIGNMENT_COMPLETION_MUTATION
);

async function startEvaluation() {
  log.debug("startEvaluation");
  if (props.assignmentCompletion.completion_status !== "EVALUATION_SUBMITTED") {
    // noinspection TypeScriptValidateTypes
    upsertAssignmentCompletionMutation.executeMutation({
      assignmentId: props.assignment.id.toString(),
      courseSessionId: courseSession.value.id.toString(),
      assignmentUserId: props.assignmentUser.user_id.toString(),
      completionStatus: "EVALUATION_IN_PROGRESS",
      completionDataString: JSON.stringify({}),
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      id: props.assignmentCompletion?.id,
    });

    emit("startEvaluation");
  } else {
    emit("startEvaluation");
  }
}
</script>

<template>
  <div>
    <div class="mb-4">
      {{ props.assignmentUser.first_name }} {{ props.assignmentUser.last_name }} hat die
      Ergebnisse am
      {{ dayjs(props.assignmentCompletion.submitted_at).format("DD.MM.YYYY") }} um
      {{ dayjs(props.assignmentCompletion.submitted_at).format("HH.mm") }} Uhr
      abgegeben.
    </div>

    <h3>Bewertung</h3>

    <p v-if="props.dueDate" class="my-4">
      Du musst die Bewertung bis am {{ props.dueDate.format("DD.MM.YYYY") }} um
      {{ props.dueDate.format("HH.mm") }} Uhr abschliessen und freigeben.
    </p>

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

    <p class="my-4">
      <a :href="props.assignment.evaluation_document_url" class="link" target="_blank">
        Beurteilungsinstrument anzeigen
      </a>
    </p>

    <div>
      <button
        class="btn-primary text-large"
        data-cy="start-evaluation"
        @click="startEvaluation()"
      >
        <span
          v-if="
            props.assignmentCompletion.completion_status === 'EVALUATION_IN_PROGRESS'
          "
        >
          Bewertung fortsetzen
        </span>
        <span
          v-else-if="
            props.assignmentCompletion.completion_status === 'EVALUATION_SUBMITTED'
          "
        >
          Bewertung ansehen
        </span>
        <span v-else>Bewertung starten</span>
      </button>
    </div>
  </div>
</template>

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