<script setup lang="ts">
import type { StatusCount, StatusCountKey } from "@/components/ui/ItProgress.vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import { loadAssignmentCompletionStatusData } from "@/services/assignmentService";
import type {
  AssignmentCompletionStatus,
  CourseSession,
  LearningContentAssignment,
  LearningContentEdoniqTest,
} from "@/types";
import log from "loglevel";
import { computed, onMounted, reactive } from "vue";
import { stringifyParse } from "@/utils/utils";

const props = defineProps<{
  courseSession: CourseSession;
  learningContent: LearningContentAssignment | LearningContentEdoniqTest;
  showTitle: boolean;
}>();

log.debug("AssignmentSubmissionProgress created", stringifyParse(props));

const state = reactive({
  statusByUser: [] as {
    userStatus: AssignmentCompletionStatus;
    progressStatus: StatusCountKey;
    userId: string;
  }[],
  submissionProgressStatusCount: {} as StatusCount,
  gradingProgressStatusCount: {} as StatusCount,
});

onMounted(async () => {
  const { assignmentSubmittedUsers, gradedUsers, total } =
    await loadAssignmentCompletionStatusData(
      props.learningContent.content_assignment.id,
      props.courseSession.id,
      props.learningContent.id
    );

  state.submissionProgressStatusCount = {
    SUCCESS: assignmentSubmittedUsers.length,
    UNKNOWN: total - assignmentSubmittedUsers.length,
    FAIL: 0,
  };
  state.gradingProgressStatusCount = {
    SUCCESS: gradedUsers.length,
    UNKNOWN: total - gradedUsers.length,
    FAIL: 0,
  };
});

const doneCount = (status: StatusCount) => {
  return status.SUCCESS || 0;
};

const totalCount = (status: StatusCount) => {
  return doneCount(status) + status.UNKNOWN || 0;
};

const showEvaluationStatus = computed(() => {
  return (
    props.learningContent.content_assignment.assignment_type === "CASEWORK" ||
    props.learningContent.content_assignment.assignment_type === "PRAXIS_ASSIGNMENT" ||
    props.learningContent.content_assignment.assignment_type === "EDONIQ_TEST"
  );
});

const showSubmissionStatus = computed(() => {
  return (
    props.learningContent.content_assignment.assignment_type === "PREP_ASSIGNMENT" ||
    props.learningContent.content_assignment.assignment_type === "REFLECTION" ||
    props.learningContent.content_assignment.assignment_type === "CONDITION_ACCEPTANCE"
  );
});
</script>

<template>
  <div>
    <div v-if="showTitle">
      {{ props.learningContent.title }}
    </div>
    <ItProgress :status-count="state.submissionProgressStatusCount" />
    <div class="text-gray-900">
      <div v-if="showEvaluationStatus">
        {{
          $t("x von y Ergebnisse abgegeben", {
            x: doneCount(state.submissionProgressStatusCount),
            y: totalCount(state.submissionProgressStatusCount),
          })
        }}
        <br />
        {{
          $t("x von y Bewertungen freigegeben", {
            x: doneCount(state.gradingProgressStatusCount),
            y: totalCount(state.gradingProgressStatusCount),
          })
        }}
      </div>
      <div v-else-if="showSubmissionStatus">
        {{
          $t("x von y abgeschlossen", {
            x: doneCount(state.submissionProgressStatusCount),
            y: totalCount(state.submissionProgressStatusCount),
          })
        }}
      </div>
    </div>
  </div>
</template>
