<script setup lang="ts">
import type {
  CourseStatisticsType,
  FeedbackStatisticsRecordType,
  PresenceRecordStatisticsType,
  StatisticsCircleDataType,
} from "@/gql/graphql";
import StatisticFilterList from "@/components/dashboard/StatisticFilterList.vue";
import { getBlendedColorForRating } from "@/utils/ratingToColor";
import { ref, type Ref } from "vue";
import { exportDataAsXls } from "@/utils/export";
import { exportFeedback } from "@/services/dashboard";
import { useUserStore } from "@/stores/user";

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

const statisticFilter: Ref<typeof StatisticFilterList | null> = ref(null);
const userStore = useUserStore();

async function exportData() {
  if (!statisticFilter.value) {
    return;
  }
  const filteredItems = statisticFilter.value.getFilteredItems();
  await exportDataAsXls(filteredItems, exportFeedback);
}
</script>

<template>
  <main>
    <div class="mb-10 flex items-center justify-between">
      <h3>{{ $t("a.Feedback Teilnehmer") }}</h3>
      <button
        v-if="userStore.course_session_experts.length > 0"
        class="flex"
        data-cy="export-button"
        @click="exportData"
      >
        <it-icon-export></it-icon-export>
        <span class="ml inline-block">{{ $t("a.Als Excel exportieren") }}</span>
      </button>
    </div>
    <div v-if="courseStatistics?.feedback_responses.records" class="mt-8 bg-white">
      <StatisticFilterList
        ref="statisticFilter"
        :course-session-properties="courseStatistics.course_session_properties"
        :items="courseStatistics.feedback_responses.records"
      >
        <template #default="{ item }">
          <div class="flex justify-between">
            <div>
              <h4 class="font-bold">
                Feedback: Circle «{{ circleMeta(item.circle_id)?.name }}»
              </h4>
              <div>
                {{ $t("a.Durchfuehrung") }} «{{
                  courseSessionName(item.course_session_id)
                }}» - Trainer: {{ (item as FeedbackStatisticsRecordType).experts }}
              </div>
            </div>
            <div class="w-80">
              <div class="mb-4 flex items-center space-x-2">
                <div
                  class="rounded px-2 py-1"
                  :style="{ backgroundColor: getBlendedColorForRating((item as FeedbackStatisticsRecordType).satisfaction_average) }"
                >
                  <i18next :translation="$t('a.{AVG} von {MAX}')">
                    <template #AVG>
                      <span class="font-bold">
                        {{
                          (
                            item as FeedbackStatisticsRecordType
                          ).satisfaction_average.toFixed(1)
                        }}
                      </span>
                    </template>
                    <template #MAX>
                      <span>
                        {{ (item as FeedbackStatisticsRecordType).satisfaction_max }}
                      </span>
                    </template>
                  </i18next>
                </div>
                <span>
                  {{ $t("a.Allgemeine Zufriedenheit") }}
                </span>
              </div>
              <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>
