<script setup lang="ts">
import type {
  CourseStatisticsType,
  PresenceRecordStatisticsType,
  StatisticsCircleDataType,
} from "@/gql/graphql";
import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import { getDateString } from "@/components/dueDates/dueDatesUtils";
import dayjs from "dayjs";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
  courseStatistics: CourseStatisticsType;
  courseSessionName: (sessionId: string) => string;
  circleMeta: (circleId: string) => StatisticsCircleDataType;
}>();

const attendanceStats = (present: number, total: number) => {
  return {
    SUCCESS: present,
    FAIL: total - present,
    UNKNOWN: 0,
  };
};
</script>

<template>
  <main>
    <div class="mb-10 flex items-center justify-between">
      <h3>{{ $t("Anwesenheit") }}</h3>
    </div>
    <div
      v-if="courseStatistics?.attendance_day_presences.records"
      class="mt-8 bg-white"
    >
      <StatisticFilterList
        :course-session-properties="courseStatistics.course_session_properties"
        :items="courseStatistics.attendance_day_presences.records"
      >
        <template #default="{ item }">
          <div class="flex justify-between">
            <div>
              <h4 class="font-bold">
                {{ $t("a.Präsenztag") }}: Circle «{{
                  circleMeta(item.circle_id)?.name
                }}»
              </h4>
              <div>
                {{ $t("a.Durchfuehrung") }} «{{
                  courseSessionName(item.course_session_id)
                }}»
              </div>
              <div class="mt-4">
                {{ $t("a.Termin") }}:
                {{
                  getDateString(dayjs((item as PresenceRecordStatisticsType).due_date))
                }}
              </div>
            </div>
            <div class="w-72">
              <div>
                {{
                  $t("a.present von total Teilnehmenden anwesend", {
                    present: (item as PresenceRecordStatisticsType)
                      .participants_present,
                    total: (item as PresenceRecordStatisticsType).participants_total,
                  })
                }}
              </div>
              <ItProgress
                :status-count="
                  attendanceStats((item as PresenceRecordStatisticsType).participants_present, (item as PresenceRecordStatisticsType).participants_total)
                "
              ></ItProgress>
              <router-link
                class="underline"
                target="_blank"
                :to="(item as PresenceRecordStatisticsType).details_url"
              >
                {{ $t("a.Details anschauen") }}
              </router-link>
            </div>
          </div>
        </template>
      </StatisticFilterList>
    </div>
  </main>
</template>
