<script setup lang="ts">
import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
import ItTextarea from "@/components/ui/ItTextarea.vue";
import {
  PERCENTAGES,
  RATINGS,
  YES_NO,
} from "@/pages/learningPath/learningContentPage/feedback/feedback.constants";
import type { LearningContentFeedbackUK, LearningContentFeedbackVV } from "@/types";
import FeedbackBase from "@/pages/learningPath/learningContentPage/feedback/FeedbackBase.vue";
import { useTranslation } from "i18next-vue";

const props = defineProps<{
  content: LearningContentFeedbackVV | LearningContentFeedbackUK;
}>();

const { t } = useTranslation();

const stepLabels = [
  t("general.introduction"),
  t("feedback.satisfactionLabel"),
  t("feedback.goalAttainmentLabel"),
  t("feedback.proficiencyLabelVV"),
  t("feedback.praxisAssignmentClarity"),
  t("feedback.recommendLabelVV"),
  t("feedback.coursePositiveFeedbackLabel"),
  t("feedback.courseNegativeFeedbackLabel"),
  t("general.submission"),
];

const questionData = [
  {
    modelKey: "satisfaction",
    items: RATINGS,
    component: ItRadioGroup,
  },
  {
    modelKey: "goal_attainment",
    items: RATINGS,
    component: ItRadioGroup,
  },
  {
    modelKey: "proficiency",
    items: PERCENTAGES,
    component: ItRadioGroup,
  },
  {
    modelKey: "preparation_task_clarity",
    items: YES_NO,
    component: ItRadioGroup,
  },
  {
    modelKey: "would_recommend",
    items: YES_NO,
    component: ItRadioGroup,
  },
  {
    modelKey: "course_positive_feedback",
    component: ItTextarea,
  },
  {
    modelKey: "course_negative_feedback",
    component: ItTextarea,
  },
];
</script>

<template>
  <FeedbackBase
    :step-labels="stepLabels"
    :question-data="questionData"
    :content="props.content"
    :introduction="$t('a.feedback.introductionVV')"
    :title="$t('Feedback')"
    :completion-title="$t('feedback.sendFeedback')"
    :completion-description="$t('feedback.completionDescriptionVV')"
    :show-avatar="false"
  />
</template>
