<script setup lang="ts">
import ItButton from "@/components/ui/ItButton.vue";
import ItCheckbox from "@/components/ui/ItCheckbox.vue";
import { ref } from "vue";
import { bustItGetCache } from "@/fetchHelpers";
import { useUserStore } from "@/stores/user";
import eventBus from "@/utils/eventBus";
import log from "loglevel";
import dayjs from "dayjs";

import { useMutation } from "@urql/vue";
import { UPSERT_ASSIGNMENT_COMPLETION_MUTATION } from "@/graphql/mutations";
import type { Assignment } from "@/types";
import DateEmbedding from "@/components/dueDates/DateEmbedding.vue";
import { useLearningMentors } from "@/composables";
import NoMentorInformationPanel from "@/components/mentor/NoMentorInformationPanel.vue";

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

const confirmPerson = ref(false);

const upsertAssignmentCompletionMutation = useMutation(
  UPSERT_ASSIGNMENT_COMPLETION_MUTATION
);

const learningMentors = useLearningMentors().learningMentors;
const selectedLearningMentor = ref();

const onSubmit = async () => {
  try {
    await upsertAssignmentCompletionMutation.executeMutation({
      assignmentId: props.assignment.id,
      courseSessionId: props.courseSessionId,
      learningContentId: props.learningContentId,
      completionDataString: JSON.stringify({}),
      completionStatus: "SUBMITTED",
      evaluationUserId: selectedLearningMentor.value,
    });
    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 class="w-full border-b border-gray-400">
    <div v-if="learningMentors?.length" class="my-6">
      <ItCheckbox
        class="py-6"
        :checkbox-item="{
          label: $t('a.confirmSubmitPersonPraxisAssignment'),
          value: 'value',
          checked: confirmPerson,
        }"
        data-cy="confirm-submit-person"
        @toggle="confirmPerson = !confirmPerson"
      ></ItCheckbox>

      <div>
        <select v-model="selectedLearningMentor" data-cy="select-learning-mentor">
          <option
            v-for="learningMentor in learningMentors"
            :key="learningMentor.id"
            :value="learningMentor.mentor.id"
          >
            {{ learningMentor.mentor.first_name }} {{ learningMentor.mentor.last_name }}
          </option>
        </select>
      </div>
    </div>
    <div v-else class="my-6">
      <NoMentorInformationPanel />
    </div>
  </div>
  <p v-if="props.submissionDeadlineStart" class="pt-6">
    {{ $t("assignment.dueDateSubmission") }}
    <DateEmbedding :single-date="dayjs(props.submissionDeadlineStart)"></DateEmbedding>
  </p>
  <ItButton
    class="mt-6"
    variant="primary"
    size="large"
    :disabled="!confirmPerson || !selectedLearningMentor"
    data-cy="submit-assignment"
    @click="onSubmit"
  >
    <p>{{ $t("a.Ergebnisse teilen") }}</p>
  </ItButton>
</template>
