<template>
  <ol v-if="feedbackData.amount > 0">
    <li
      v-for="(question, i) in orderedQuestions"
      :key="i"
      :data-cy="`question-${i + 1}`"
    >
      <RatingScale
        v-if="ratingKeys.includes(question.key)"
        class="mb-8 bg-white"
        :ratings="feedbackData.questions[question.key]"
        :title="`${$t('feedback.questionTitle')} ${i + 1}`"
        :text="question.question"
      />
      <VerticalBarChart
        v-else-if="verticalChartKeys.includes(question.key)"
        class="mb-8 bg-white"
        :title="`${$t('feedback.questionTitle')} ${i + 1}`"
        :ratings="feedbackData.questions[question.key]"
        :text="question.question"
        :ratio="0.2"
      />
      <OpenFeedback
        v-else-if="
          openKeys.includes(question.key) && feedbackData.questions[question.key]
        "
        class="mb-8 bg-white"
        :title="`${$t('feedback.questionTitle')} ${i + 1}`"
        :text="question.question"
        :answers="feedbackData.questions[question.key].filter((a: string) => a !== '')"
      ></OpenFeedback>
      <HorizontalBarChart
        v-else-if="
          horizontalChartKeys.includes(question.key) &&
          feedbackData.questions[question.key]
        "
        class="mb-8 bg-white"
        :title="`${$t('feedback.questionTitle')} ${i + 1}`"
        :text="question.question"
        :items="feedbackData.questions[question.key].map((a: string) => `${a}%`)"
      />
    </li>
  </ol>
</template>

<script setup lang="ts">
import HorizontalBarChart from "@/components/ui/HorizontalBarChart.vue";
import OpenFeedback from "@/components/ui/OpenFeedback.vue";
import RatingScale from "@/components/ui/RatingScale.vue";
import VerticalBarChart from "@/components/ui/VerticalBarChart.vue";
import type { FeedbackData } from "@/types";
import * as log from "loglevel";

interface Props {
  orderedQuestions?: {
    key: string;
    question: string;
  }[];
  feedbackData: FeedbackData;
  ratingKeys?: string[];
  verticalChartKeys?: string[];
  horizontalChartKeys?: string[];
  openKeys?: string[];
}

withDefaults(defineProps<Props>(), {
  orderedQuestions: () => [],
  ratingKeys: () => [],
  verticalChartKeys: () => [],
  horizontalChartKeys: () => [],
  openKeys: () => [],
});

log.debug("FeedbackBasePage created");
</script>

<style scoped></style>
