<template>
  <div v-if="!loading" class="bg-gray-200">
    <div class="container-large">
      <nav class="py-4 pb-4">
        <router-link
          class="btn-text inline-flex items-center pl-0"
          :to="`/course/${props.courseSlug}/cockpit`"
        >
          <it-icon-arrow-left />
          <span>{{ $t("general.back") }}</span>
        </router-link>
      </nav>
      <main v-if="feedbackData">
        <div class="flex items-center justify-between">
          <h2 class="mb-2">{{ $t("feedback.feedbackPageTitle") }}</h2>
          <button
            v-if="feedbackType == 'uk'"
            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>
        <p class="mb-10">
          <span class="font-bold" data-cy="feedback-data-amount">
            {{ feedbackData.amount }}
          </span>
          {{ $t("feedback.feedbackPageInfo") }}
        </p>
        <FeedbackPageVV v-if="feedbackType === 'vv'" :feedback-data="feedbackData" />
        <FeedbackPageUK
          v-else-if="feedbackType === 'uk'"
          :feedback-data="feedbackData"
        />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCurrentCourseSession } from "@/composables";
import { itGet } from "@/fetchHelpers";
import FeedbackPageUK from "@/pages/cockpit/FeedbackPageUK.vue";
import FeedbackPageVV from "@/pages/cockpit/FeedbackPageVV.vue";
import { useExpertCockpitPageData } from "@/pages/cockpit/cockpitPage/composables";
import { exportFeedback } from "@/services/dashboard";
import { useUserStore } from "@/stores/user";
import type { FeedbackData, FeedbackType } from "@/types";
import { openDataAsXls } from "@/utils/export";
import * as log from "loglevel";
import { onMounted, ref } from "vue";

const props = defineProps<{
  courseSlug: string;
  circleId: string;
}>();

log.debug("FeedbackPage created", props.circleId);
const { loading } = useExpertCockpitPageData(props.courseSlug);
const courseSession = useCurrentCourseSession();
const userStore = useUserStore();

const feedbackData = ref<FeedbackData | undefined>(undefined);
const feedbackType = ref<FeedbackType | undefined>(undefined);

async function exportData() {
  const data = await exportFeedback(
    {
      courseSessionIds: [Number(courseSession.value.id)],
      circleIds: [Number(props.circleId)],
    },
    userStore.language
  );
  openDataAsXls(data.encoded_data, data.file_name);
}

onMounted(async () => {
  log.debug("FeedbackPage mounted");
  feedbackData.value = await itGet(
    `/api/core/feedback/${courseSession.value.id}/${props.circleId}`
  );
  log.debug("FeedbackPage feedbackData", feedbackData.value);
  if (
    feedbackData.value &&
    ["uk", "vv"].includes(feedbackData.value?.feedbackType ?? "")
  ) {
    feedbackType.value = feedbackData.value.feedbackType;
  }
});
</script>

<style scoped></style>
