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

async function startEvaluation() {
  log.debug("startEvaluation");
  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_in_progress",
  });
  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">TODO: Link zu Bewertungskriterium</p>

    <div>
      <button class="btn-primary" @click="startEvaluation()">
        <span
          v-if="
            props.assignmentCompletion.completion_status === 'evaluation_in_progress'
          "
        >
          Bewertung fortsetzen
        </span>
        <span v-else>Bewertung starten</span>
      </button>
    </div>
  </div>
</template>

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