<script setup lang="ts">
import { useDashboardStore } from "@/stores/dashboard";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { computed } from "vue";
import type {
  CompetenceRecordStatisticsType,
  CourseStatisticsType,
} from "@/gql/graphql";
import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
import { useCourseStatistics } from "@/composables";

const dashboardStore = useDashboardStore();

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

const { courseSessionName, circleMeta } = useCourseStatistics();
</script>

<template>
  <main v-if="statistics">
    <div class="mb-10 flex items-center justify-between">
      <h3>{{ $t("a.Selbsteinschätzung") }}</h3>
      <ItDropdownSelect
        :model-value="dashboardStore.currentDashboardConfig"
        class="mt-4 w-full lg:mt-0 lg:w-96"
        :items="dashboardStore.dashboardConfigs"
        @update:model-value="dashboardStore.switchAndLoadDashboardConfig"
      ></ItDropdownSelect>
    </div>
    <div v-if="statistics.competences.records" class="mt-8 bg-white">
      <StatisticFilterList
        :course-session-properties="statistics.course_session_properties"
        :items="statistics.competences.records"
      >
        <template #default="{ item }">
          <div class="flex justify-between">
            <div>
              <h4 class="font-bold">
                {{ $t("a.Selbsteinschätzung") }}:
                {{ (item as CompetenceRecordStatisticsType).title }}
              </h4>
              <div>
                Durchführung «{{ courseSessionName(item.course_session_id) }}» - Circle
                «{{ circleMeta(item.circle_id)?.name }}»
              </div>
            </div>
            <div>
              <div class="mb-4 flex items-center space-x-2">
                <it-icon-smiley-happy class="h-8 w-8"></it-icon-smiley-happy>
                <span class="pr-3">
                  {{ (item as CompetenceRecordStatisticsType).success_count }}
                </span>
                <it-icon-smiley-thinking class="h-8 w-8"></it-icon-smiley-thinking>
                <span>{{ (item as CompetenceRecordStatisticsType).fail_count }}</span>
              </div>
              <router-link
                class="whitespace-nowrap underline"
                target="_blank"
                :to="(item as CompetenceRecordStatisticsType).details_url"
              >
                {{ $t("a.Details anschauen") }}
              </router-link>
            </div>
          </div>
        </template>
      </StatisticFilterList>
    </div>
  </main>
</template>
