<template>
  <div 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">
        <h1 class="mb-2">{{ $t("feedback.feedbackPageTitle") }}</h1>
        <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 * as log from "loglevel";
import { onMounted, ref } from "vue";
import type { FeedbackData, FeedbackType } from "@/types";
import FeedbackPageVV from "@/pages/cockpit/FeedbackPageVV.vue";
import FeedbackPageUK from "@/pages/cockpit/FeedbackPageUK.vue";

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

log.debug("FeedbackPage created", props.circleId);

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

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>
