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

const props = defineProps<{
  courseSession: CourseSession;
  assignment: AssignmentLearningContent;
  showTitle: boolean;
}>();

log.debug("AssignmentSubmissionProgress created", props.assignment.assignmentId);

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

onMounted(async () => {
  state.statusByUser = await loadAssignmentCompletionStatusData(
    props.assignment.assignmentId,
    props.courseSession.id
  );

  state.progressStatusCount = countBy(
    state.statusByUser,
    "progressStatus"
  ) as StatusCount;
});
</script>

<template>
  <div v-if="state.statusByUser.length">
    <div v-if="showTitle">
      {{ props.assignment.title }}
    </div>
    <div><ItProgress :status-count="state.progressStatusCount" /></div>
    <div class="text-gray-900" :class="{ 'text-gray-900': showTitle }">
      {{ state.progressStatusCount.success || 0 }} von
      {{
        (state.progressStatusCount.success || 0) +
        (state.progressStatusCount.unknown || 0)
      }}
      Lernenden haben ihre Ergebnisse eingereicht.
    </div>
  </div>
</template>

<style scoped></style>
