<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 { computed } from "vue";
import dayjs, { Dayjs } from "dayjs";
import * as log from "loglevel";

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

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

log.debug("EvaluationIntro setup");

const text = computed(() => {
  if (props.assignment.assignment_type === "CASEWORK") {
    return {
      evaluationTitle: "a.Bewertung",
      evaluationInstruction: "assignment.evaluationInstrumentDescriptionText",
      evaluationStart: "a.Bewertung starten",
      evaluationContinue: "a.Bewertung fortsetzen",
      evaluationView: "a.Bewertung ansehen",
    };
  } else if (props.assignment.assignment_type === "PRAXIS_ASSIGNMENT") {
    return {
      evaluationTitle: "Feedback",
      evaluationInstruction: "a.assignment.evaluationInstrumentDescriptionTextFeedback",
      evaluationStart: "a.Feedback geben",
      evaluationContinue: "a.Feedback fortsetzen",
      evaluationView: "a.Feedback ansehen",
    };
  } else {
    return {
      evaluationTitle: "UNKNOWN ASSIGNMENT TYPE",
      evaluationInstruction: "UNKNOWN ASSIGNMENT TYPE",
      evaluationStart: "UNKNOWN ASSIGNMENT TYPE",
      evaluationContinue: "UNKNOWN ASSIGNMENT TYPE",
      evaluationView: "UNKNOWN ASSIGNMENT TYPE",
    };
  }
});

const courseSession = useCurrentCourseSession();

const upsertAssignmentCompletionMutation = useMutation(
  UPSERT_ASSIGNMENT_COMPLETION_MUTATION
);

async function startEvaluation() {
  log.debug("startEvaluation");
  if (props.assignmentCompletion.completion_status !== "EVALUATION_SUBMITTED") {
    upsertAssignmentCompletionMutation.executeMutation({
      assignmentId: props.assignment.id,
      courseSessionId: courseSession.value.id,
      assignmentUserId: props.assignmentUser.id,
      completionStatus: "EVALUATION_IN_PROGRESS",
      completionDataString: JSON.stringify({}),
      // next line used for urql
      // 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">
      {{
        $t("assignment.x hat die Ergebnisse am y um z Uhr abgegeben", {
          x: props.assignmentUser.first_name + " " + props.assignmentUser.last_name,
          y: dayjs(props.assignmentCompletion.submitted_at).format("DD.MM.YYYY"),
          z: dayjs(props.assignmentCompletion.submitted_at).format("HH.mm"),
        })
      }}
    </div>

    <h3 data-cy="title">{{ $t(text.evaluationTitle) }}</h3>

    <p v-if="props.dueDate" class="my-4" data-cy="evaluation-duedate">
      {{
        $t(
          "assignment.Du musst die Bewertung bis am x um y Uhr abschliessen und freigeben",
          {
            x: props.dueDate.format("DD.MM.YYYY"),
            y: props.dueDate.format("HH.mm"),
          }
        )
      }}
    </p>

    <p class="my-4" data-cy="instruction">
      {{
        $t(text.evaluationInstruction, {
          name: `${
            props.assignmentUser.first_name + " " + props.assignmentUser.last_name
          }`,
        })
      }}
    </p>

    <p v-if="props.assignment.assignment_type === 'CASEWORK'" class="my-4">
      <a :href="props.assignment.evaluation_document_url" class="link" target="_blank">
        {{ $t("a.Beurteilungsinstrument anzeigen") }}
      </a>
    </p>

    <p
      v-if="props.assignment.solution_sample && props.assignment.solution_sample.url"
      class="my-4"
    >
      <a :href="props.assignment.solution_sample.url" class="link" target="_blank">
        {{ $t("assignment.submissionShowSampleSolution") }}
      </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'
          "
        >
          {{ $t(text.evaluationContinue) }}
        </span>
        <span
          v-else-if="
            props.assignmentCompletion.completion_status === 'EVALUATION_SUBMITTED'
          "
        >
          {{ $t(text.evaluationView) }}
        </span>
        <span v-else>{{ $t(text.evaluationStart) }}</span>
      </button>
    </div>
  </div>
</template>

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