<script setup lang="ts">
import ItCheckbox from "@/components/ui/ItCheckbox.vue";
import { computed, reactive } from "vue";
import type { CourseSessionUserObjectsType } from "@/gql/graphql";
import dayjs from "dayjs";
import DateEmbedding from "@/components/dueDates/DateEmbedding.vue";
import ItButton from "@/components/ui/ItButton.vue";
import { useMutation } from "@urql/vue";
import { UPSERT_ASSIGNMENT_COMPLETION_MUTATION } from "@/graphql/mutations";
import { useUserStore } from "@/stores/user";
import { bustItGetCache } from "@/fetchHelpers";
import eventBus from "@/utils/eventBus";
import log from "loglevel";
import type { Assignment } from "@/types";

const props = defineProps<{
  evaluationDocumentUrl: string;
  submissionDeadlineStart?: string | null;
  circleExpert?: CourseSessionUserObjectsType;
  courseSessionId: string;
  assignment: Assignment;
  learningContentId: string;
}>();

const state = reactive({
  confirmInput: false,
  confirmPerson: false,
});

const circleExpertName = computed(() => {
  return `${props.circleExpert?.first_name} ${props.circleExpert?.last_name}`;
});

const cannotSubmit = computed(() => {
  return !state.confirmInput || !state.confirmPerson;
});

const upsertAssignmentCompletionMutation = useMutation(
  UPSERT_ASSIGNMENT_COMPLETION_MUTATION
);

const onSubmit = async () => {
  try {
    await upsertAssignmentCompletionMutation.executeMutation({
      assignmentId: props.assignment.id,
      courseSessionId: props.courseSessionId,
      learningContentId: props.learningContentId,
      completionDataString: JSON.stringify({}),
      completionStatus: "SUBMITTED",
    });
    bustItGetCache(
      `/api/course/completion/${props.courseSessionId}/${useUserStore().id}/`
    );
    // if solution sample is available, do not close the assigment automatically
    if (!props.assignment.solution_sample) {
      eventBus.emit("finishedLearningContent", true);
    }
  } catch (error) {
    log.error("Could not submit assignment", error);
  }
};
</script>

<template>
  <div>
    <ItCheckbox
      class="w-full border-b border-gray-400 py-10 sm:py-6"
      :checkbox-item="{
        label: $t('assignment.confirmSubmitResults'),
        value: 'value',
        checked: state.confirmInput,
      }"
      data-cy="confirm-submit-results"
      @toggle="state.confirmInput = !state.confirmInput"
    ></ItCheckbox>
    <div class="w-full border-b border-gray-400">
      <ItCheckbox
        class="py-6"
        :checkbox-item="{
          label: $t('assignment.confirmSubmitPerson'),
          value: 'value',
          checked: state.confirmPerson,
        }"
        data-cy="confirm-submit-person"
        @toggle="state.confirmPerson = !state.confirmPerson"
      ></ItCheckbox>
      <div v-if="circleExpert" class="flex flex-row items-center pb-6 pl-[49px]">
        <img
          alt="Notification icon"
          class="mr-2 h-[45px] min-w-[45px] rounded-full"
          :src="circleExpert.avatar_url"
        />
        <p class="text-base font-bold">
          {{ circleExpertName }}
        </p>
      </div>
    </div>
    <div class="flex flex-col space-x-2 pt-6 text-base sm:flex-row">
      <p>{{ $t("assignment.assessmentDocumentDisclaimer") }}</p>
      <a :href="evaluationDocumentUrl" class="underline">
        {{ $t("assignment.showAssessmentDocument") }}
      </a>
    </div>
    <p v-if="submissionDeadlineStart" class="pt-6">
      {{ $t("assignment.dueDateSubmission") }}
      <DateEmbedding
        :single-date="dayjs(props.submissionDeadlineStart)"
      ></DateEmbedding>
    </p>
    <ItButton
      class="mt-6"
      variant="blue"
      size="large"
      :disabled="cannotSubmit"
      data-cy="submit-assignment"
      @click="onSubmit"
    >
      <p>{{ $t("assignment.submitAssignment") }}</p>
    </ItButton>
  </div>
</template>
