<script setup lang="ts">
import type { StatusCount, StatusCountKey } from "@/components/ui/ItProgress.vue";
import EvaluationContainer from "@/pages/cockpit/assignmentEvaluationPage/EvaluationContainer.vue";
import AssignmentSubmissionResponses from "@/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionResponses.vue";
import { useAssignmentStore } from "@/stores/assignmentStore";
import { useCourseSessionsStore } from "@/stores/courseSessions";
import { Assignment, CourseSessionAssignmentDetails, CourseSessionUser } from "@/types";
import log from "loglevel";
import { computed, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";

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

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

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

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

const assignmentStore = useAssignmentStore();
const courseSessionStore = useCourseSessionsStore();
const router = useRouter();

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

  if (courseSessionStore.currentCourseSession) {
    state.assignmentUser = courseSessionStore.currentCourseSession.users.find(
      (user) => user.user_id == props.userId
    );
  }

  try {
    state.assignment = await assignmentStore.loadAssignment(props.assignmentId);
    await assignmentStore.loadAssignmentCompletion(
      props.assignmentId,
      courseSessionStore.currentCourseSession.id,
      props.userId
    );
  } catch (error) {
    log.error(error);
  }
});

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

const assignmentCompletion = computed(() => assignmentStore.assignmentCompletion);
</script>

<template>
  <div class="absolute bottom-0 top-0 z-10 w-full bg-white">
    <div v-if="state.assignment && assignmentCompletion" 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>Geleitete Fallarbeit: {{ state.assignment.title }}</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="exit()"
        >
          <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">
            <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="state.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="state.assignment"
          ></EvaluationContainer>
        </div>
      </div>
    </div>
  </div>
</template>

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

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