<script setup lang="ts">
import ItButton from "@/components/ui/ItButton.vue";
import ItSuccessAlert from "@/components/ui/ItSuccessAlert.vue";
import {
  useCourseData,
  useCourseSessionDetailQuery,
  useCurrentCourseSession,
} from "@/composables";
import AssignmentSubmissionResponses from "@/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionResponses.vue";
import type { Assignment, AssignmentCompletion, AssignmentTask } from "@/types";
import { computed } from "vue";
import { useTranslation } from "i18next-vue";
import type { AssignmentAssignmentAssignmentTypeChoices } from "@/gql/graphql";
import CaseWorkSubmit from "@/components/learningPath/assignment/CaseWorkSubmit.vue";
import SimpleSubmit from "@/components/learningPath/assignment/SimpleSubmit.vue";
import PraxisAssignmentSubmit from "@/components/learningPath/assignment/PraxisAssignmentSubmit.vue";

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

const emit = defineEmits<{
  (e: "editTask", task: AssignmentTask): void;
}>();

const courseSession = useCurrentCourseSession();
const courseSessionDetailResult = useCourseSessionDetailQuery();
const courseData = useCourseData(courseSession.value.course.slug);

const { t } = useTranslation();

const learningContent = computed(() => {
  return courseData.findLearningContent(props.learningContentId);
});

const circleExperts = computed(() => {
  if (learningContent.value?.circle) {
    return courseSessionDetailResult.filterCircleExperts(
      learningContent.value?.circle.slug
    );
  }
  return [];
});

const circleExpert = computed(() => {
  return circleExperts.value[0];
});

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

const completionStatus = computed(() => {
  return props.assignmentCompletion?.completion_status ?? "IN_PROGRESS";
});

const completionData = computed(() => {
  return props.assignmentCompletion?.completion_data ?? {};
});

const completionTaskData = computed(() => {
  return props.assignmentCompletion?.task_completion_data ?? {};
});

function checkAssignmentType(
  assignmentType: AssignmentAssignmentAssignmentTypeChoices[]
) {
  return assignmentType.includes(props.assignment.assignment_type);
}

const isCasework = computed(() => checkAssignmentType(["CASEWORK"]));
const isPraxisAssignment = computed(() => checkAssignmentType(["PRAXIS_ASSIGNMENT"]));

const onEditTask = (task: AssignmentTask) => {
  emit("editTask", task);
};

const openSolutionSample = () => {
  const url = props.assignment.solution_sample?.url ?? "";

  if (props.assignment.solution_sample) {
    window.open(url, "_blank");
  }
};
</script>
<template>
  <div class="w-full border border-gray-400 p-8" data-cy="confirm-container">
    <h3 class="heading-3 border-b border-gray-400 pb-6">
      <template v-if="isPraxisAssignment">
        {{ $t("a.Ergebnisse teilen") }}
      </template>
      <template v-else>
        {{ $t("assignment.submitAssignment") }}
      </template>
    </h3>

    <div v-if="completionStatus === 'IN_PROGRESS'">
      <CaseWorkSubmit
        v-if="isCasework"
        :course-session-id="courseSessionId"
        :assignment="assignment"
        :learning-content-id="learningContentId"
        :circle-expert="circleExpert"
        :evaluation-document-url="assignment.evaluation_document_url"
        :submission-deadline-start="submissionDeadlineStart"
      />

      <PraxisAssignmentSubmit
        v-else-if="isPraxisAssignment"
        :course-session-id="courseSessionId"
        :assignment="assignment"
        :learning-content-id="learningContentId"
        :submission-deadline-start="submissionDeadlineStart"
      />

      <SimpleSubmit
        v-else
        :course-session-id="courseSessionId"
        :assignment="assignment"
        :learning-content-id="learningContentId"
      />
    </div>
    <div v-else class="pt-6">
      <ItSuccessAlert
        :text="t('assignment.assignmentSubmitted')"
        data-cy="success-text"
      ></ItSuccessAlert>
      <p v-if="isCasework" class="pt-6">
        {{
          $t("assignment.submissionNotificationDisclaimer", { name: circleExpertName })
        }}
      </p>
      <div
        v-if="assignment.solution_sample"
        class="pt-2"
        data-cy="show-sample-solution"
      >
        <p>
          {{ $t("assignment.submissionShowSampleSolutionText") }}
        </p>

        <ItButton
          class="mt-6"
          variant="primary"
          size="normal"
          :disabled="false"
          data-cy="show-sample-solution-button"
          @click="openSolutionSample"
        >
          <p>{{ $t("assignment.submissionShowSampleSolution") }}</p>
        </ItButton>
      </div>
    </div>
  </div>
  <AssignmentSubmissionResponses
    :assignment="assignment"
    :assignment-completion-data="completionData"
    :assignment-task-completion-data="completionTaskData"
    :allow-edit="completionStatus === 'IN_PROGRESS'"
    @edit-task="onEditTask"
  ></AssignmentSubmissionResponses>
</template>
