<script setup lang="ts">
import { useAssignmentStore } from "@/stores/assignmentStore";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import type { Assignment, AssignmentCompletion, CourseSessionUser } from "@/types";
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 courseSessionsStore = useCourseSessionsStore();
const assignmentStore = useAssignmentStore();

async function startEvaluation() {
  log.debug("startEvaluation");
  if (props.assignmentCompletion.completion_status !== "evaluation_submitted") {
    await assignmentStore.evaluateAssignmentCompletion({
      assignment_user_id: Number(props.assignmentUser.user_id),
      assignment_id: props.assignment.id,
      course_session_id: courseSessionsStore.currentCourseSession!.id,
      completion_data: {},
      completion_status: "evaluation_in_progress",
    });
    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 daruas 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" @click="startEvaluation()">
        <span
          v-if="
            props.assignmentCompletion.completion_status === 'evaluation_in_progress'
          "
        >
          Bewertung fortsetzen
        </span>
        <span
          v-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>
