<script setup lang="ts">
import { useDashboardStore } from "@/stores/dashboard";
import { computed } from "vue";
import CourseStatistics from "@/components/dashboard/CourseStatistics.vue";
import AttendanceSummaryBox from "@/components/dashboard/AttendanceSummaryBox.vue";
import type { CourseStatisticsType } from "@/gql/graphql";
import AssignmentSummaryBox from "@/components/dashboard/AssignmentSummaryBox.vue";
import FeedbackSummaryBox from "@/components/dashboard/FeedbackSummaryBox.vue";
import CompetenceSummaryBox from "@/components/dashboard/CompetenceSummaryBox.vue";

const dashboardStore = useDashboardStore();

const statistics = computed(() => {
  return dashboardStore.currentDashBoardData as CourseStatisticsType;
});

const courseSessionSelectionMetrics = computed(() => {
  return statistics.value.course_session_selection_metrics;
});

const attendanceDayPresences = computed(() => {
  return statistics.value.attendance_day_presences.summary;
});

const assigmentSummary = computed(() => {
  return statistics.value.assignments.summary;
});

const competenceSummary = computed(() => {
  return statistics.value.competences.summary;
});

const feebackSummary = computed(() => {
  return statistics.value.feedback_responses.summary;
});
</script>

<template>
  <div v-if="statistics" class="mb-14 space-y-8">
    <CourseStatistics
      :session-count="courseSessionSelectionMetrics.session_count"
      :participant-count="courseSessionSelectionMetrics.participant_count"
      :expert-count="courseSessionSelectionMetrics.expert_count"
    />
    <div class="grid auto-rows-fr grid-cols-1 gap-8 xl:grid-cols-2">
      <AttendanceSummaryBox
        :days-completed="attendanceDayPresences.days_completed"
        :avg-participants-present="attendanceDayPresences.participants_present"
      />
      <AssignmentSummaryBox
        :assignments-completed="assigmentSummary.completed_count"
        :avg-passed="assigmentSummary.average_passed"
      />
      <FeedbackSummaryBox
        :feedback-count="feebackSummary.total_responses"
        :statisfaction-max="feebackSummary.satisfaction_max"
        :statisfaction-avg="feebackSummary.satisfaction_average"
      />
      <CompetenceSummaryBox
        :fail-count="competenceSummary.fail_total"
        :success-count="competenceSummary.success_total"
        details-link="/statistic/competence"
      />
    </div>
  </div>
</template>
