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

const props = defineProps<{
  content: LearningContentFeedback;
}>();
const courseSessionDetailResult = useCourseSessionDetailQuery();

const { t } = useTranslation();

const circleExperts = computed(() => {
  if (props.content?.circle?.slug) {
    return courseSessionDetailResult.filterCircleExperts(props.content.circle.slug);
  }
  return [];
});

const stepLabels = [
  t("general.introduction"),
  t("feedback.satisfactionLabel"),
  t("feedback.goalAttainmentLabel"),
  t("feedback.proficiencyLabel"),
  t("feedback.preparationTaskClarityLabel"),
  t("feedback.instructorCompetenceLabel"),
  t("feedback.instructorRespectLabel"),
  t("feedback.instructorOpenFeedbackLabel"),
  t("feedback.recommendLabel"),
  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: "instructor_competence",
    items: RATINGS,
    component: ItRadioGroup,
  },
  {
    modelKey: "instructor_respect",
    items: RATINGS,
    component: ItRadioGroup,
  },
  {
    modelKey: "instructor_open_feedback",
    component: ItTextarea,
  },
  {
    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('feedback.intro', {
        name: `${circleExperts[0]?.first_name} ${circleExperts[0]?.last_name}`,
      })
    "
    :title="$t('feedback.areYouSatisfied')"
    :completion-title="
      $t('feedback.completionTitle', {
        name: `${circleExperts[0].first_name} ${circleExperts[0].last_name}`,
      })
    "
    :completion-description="$t('feedback.completionDescription')"
    :show-avatar="true"
  />
</template>
