<script setup lang="ts">
import { useCurrentCourseSession } from "@/composables";
import { ASSIGNMENT_COMPLETION_QUERY } from "@/graphql/queries";
import EvaluationContainer from "@/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue";
import AssignmentSubmissionResponses from "@/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionResponses.vue";
import type {
  Assignment,
  AssignmentCompletion,
  CourseSessionAssignmentDetails,
  CourseSessionUser,
} from "@/types";
import { useQuery } from "@urql/vue";
import log from "loglevel";
import { computed, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";

const props = defineProps<{
  courseSlug: string;
  assignmentId: string;
  userId: string;
}>();

log.debug("AssignmentEvaluationPage created", props.assignmentId, props.userId);

interface StateInterface {
  courseSessionAssignmentDetails: CourseSessionAssignmentDetails | undefined;
  assignmentUser: CourseSessionUser | undefined;
}

const state: StateInterface = reactive({
  courseSessionAssignmentDetails: undefined,
  assignmentUser: undefined,
});

const courseSession = useCurrentCourseSession();
const router = useRouter();

// noinspection TypeScriptValidateTypes TODO: because of IntelliJ
const queryResult = useQuery({
  query: ASSIGNMENT_COMPLETION_QUERY,
  variables: {
    courseSessionId: courseSession.value.id.toString(),
    assignmentId: props.assignmentId,
    assignmentUserId: props.userId,
  },
});

onMounted(async () => {
  log.debug("AssignmentView mounted", props.assignmentId, props.userId);

  state.assignmentUser = courseSession.value.users.find(
    (user) => user.user_id === Number(props.userId)
  );
});

function close() {
  router.push({
    path: `/course/${props.courseSlug}/cockpit/assignment`,
  });
}

const assignmentCompletion = computed(
  () =>
    queryResult.data.value?.assignment_completion as AssignmentCompletion | undefined
);

const assignment = computed(
  () => queryResult.data.value?.assignment as Assignment | undefined
);
</script>

<template>
  <div class="absolute bottom-0 top-0 z-10 w-full bg-white">
    <div
      v-if="assignment && assignmentCompletion && state.assignmentUser"
      class="relative"
    >
      <header
        class="relative flex h-12 w-full items-center justify-between border-b border-b-gray-400 bg-white px-4 lg:h-16 lg:px-8"
      >
        <div class="flex items-center text-gray-900">
          <it-icon-assignment class="h-6 w-6"></it-icon-assignment>
          <div class="ml-2">Geleitete Fallarbeit: {{ assignment.title }}</div>
        </div>
        <button
          type="button"
          class="absolute right-2 top-2 h-8 w-8 cursor-pointer lg:right-4 lg:top-4"
          data-cy="close-learning-content"
          @click="close()"
        >
          <it-icon-close></it-icon-close>
        </button>
      </header>

      <div class="h-content flex">
        <div class="h-full w-1/2 overflow-y-auto bg-white">
          <!-- Left part content goes here -->
          <div class="p-10" data-cy="student-submission">
            <h3>Ergebnisse</h3>

            <div class="my-6 flex items-center">
              <img
                :src="state.assignmentUser?.avatar_url"
                class="mr-4 h-11 w-11 rounded-full"
              />
              <div class="font-bold">
                {{ state.assignmentUser?.first_name }}
                {{ state.assignmentUser?.last_name }}
              </div>
            </div>
            <AssignmentSubmissionResponses
              :assignment="assignment"
              :assignment-completion-data="assignmentCompletion.completion_data"
              :allow-edit="false"
            ></AssignmentSubmissionResponses>
          </div>
        </div>
        <div class="w-1/2 overflow-y-auto bg-gray-200">
          <EvaluationContainer
            :assignment-completion="assignmentCompletion"
            :assignment-user="state.assignmentUser"
            :assignment="assignment"
            @close="close()"
          ></EvaluationContainer>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$nav-height: 64px;

.h-content {
  height: calc(100vh - $nav-height);
}
</style>
