<script setup lang="ts">
import type { TrainingResponsibleStatisticsQuery } from "@/gql/graphql";
import { fetchTrainingResponsibleStatistics } from "@/services/dashboard";
import { formatCurrencyChfCentimes } from "@/utils/format_currency_chf";
import { computed, onMounted, ref } from "vue";
import BaseBox from "./BaseBox.vue";

const props = defineProps<{
  courseId: string;
  courseSessionId: string;
}>();

const statistics = ref<TrainingResponsibleStatisticsQuery | null>(null);

onMounted(async () => {
  statistics.value = await fetchTrainingResponsibleStatistics(props.courseSessionId);
});

const totalCostInCurrentYear = computed(() => {
  return statistics.value?.training_responsible_statistics?.cost_per_year.find(
    (cost) => cost?.year === new Date().getFullYear()
  )?.total_cost;
});

const attendanceCountInCurrentYear = computed(() => {
  return (
    statistics.value?.training_responsible_statistics?.participants_per_year?.find(
      (entry) => entry?.year === new Date().getFullYear()
    )?.participants?.length ?? 0
  );
});
</script>

<template>
  <div class="flex flex-col flex-wrap items-stretch md:flex-row">
    <BaseBox
      :details-link="`/dashboard/cost/${courseSessionId}`"
      data-cy="dashboard.mentor.competenceSummary"
      class="w-1/2"
    >
      <template #title>{{ $t("Kosten in") }} {{ new Date().getFullYear() }}</template>
      <template #content>
        <div class="flex flex-row space-x-3 bg-white pb-6">
          <div class="flex h-[74px] items-center justify-center py-1 pr-3">
            <span class="text-3xl font-bold">
              {{ formatCurrencyChfCentimes(totalCostInCurrentYear) }}
            </span>
            <span class="ml-4">CHF</span>
          </div>
        </div>
      </template>
    </BaseBox>
    <BaseBox
      :details-link="`/dashboard/persons?course=${courseId}`"
      data-cy="dashboard.mentor.competenceSummary"
    >
      <template #title>{{ $t("Teilnehmer im 2024") }}</template>
      <template #content>
        <div class="flex flex-row space-x-3 bg-white pb-6">
          <div
            class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
          >
            <span>{{ attendanceCountInCurrentYear }}</span>
          </div>
          <p class="ml-3 mt-0 leading-[74px]">
            {{ $t("Teilnehmer") }}
          </p>
        </div>
      </template>
    </BaseBox>
  </div>
</template>
