Mobile/app/(quiz)/quiz.tsx

import BackButton from "@/components/BackButton";
import { toBgColor, toTextColor } from "@/components/Constants";
import ActivityQuestion, {
  ActivityQuestionRef,
} from "@/components/quiz/ActivityQuestion";
import AgeQuestion, { AgeQuestionRef } from "@/components/quiz/AgeQuestion";
import BeginnerQuestion, {
  BeginnerQuestionRef,
} from "@/components/quiz/BeginnerQuestion";
import FrequencyQuestion, {
  FrequencyQuestionRef,
} from "@/components/quiz/FrequencyQuestion";
import GenderQuestion, {
  GenderQuestionRef,
} from "@/components/quiz/GenderQuestion";
import GoalQuestion, { GoalQuestionRef } from "@/components/quiz/GoalQuestion";
import HeightQuestion, {
  HeightQuestionRef,
} from "@/components/quiz/HeightQuestion";
import SleepQuestion, {
  SleepQuestionRef,
} from "@/components/quiz/SleepQuestion";
import SportQuestion, {
  SportQuestionRef,
} from "@/components/quiz/SportQuestion";
import WeightQuestion, {
  WeightQuestionRef,
} from "@/components/quiz/WeightQuestion";
import Button from "@/components/ui/Button";
import Screen from "@/components/ui/Screen";
import Text from "@/components/ui/Text";
import { useSession } from "@/ctx";
import { useRouter } from "expo-router";
import React, { useRef, useState } from "react";
import { View } from "react-native";

export default function Quiz() {
  const { signIn, session } = useSession();
  const router = useRouter();

  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const goalRef = useRef<GoalQuestionRef>(null);
  const genderRef = useRef<GenderQuestionRef>(null);
  const weightRef = useRef<WeightQuestionRef>(null);
  const heightRef = useRef<HeightQuestionRef>(null);
  const ageRef = useRef<AgeQuestionRef>(null);
  const beginnerRef = useRef<BeginnerQuestionRef>(null);
  const activityRef = useRef<ActivityQuestionRef>(null);
  const frequencyRef = useRef<FrequencyQuestionRef>(null);
  const sportQuestionRef = useRef<SportQuestionRef>(null);
  const sleepQuestionRef = useRef<SleepQuestionRef>(null);

  interface Question<T = any> {
    component: React.ForwardRefExoticComponent<T & React.RefAttributes<any>>;
    props: T;
  }

  const questions: Question[] = [
    { component: GoalQuestion, props: { ref: goalRef } },
    { component: GenderQuestion, props: { ref: genderRef } },
    {
      component: WeightQuestion,
      props: { ref: weightRef },
    },
    { component: HeightQuestion, props: { ref: heightRef } },
    { component: AgeQuestion, props: { ref: ageRef } },
    { component: BeginnerQuestion, props: { ref: beginnerRef } },
    { component: ActivityQuestion, props: { ref: activityRef } },
    //{ component: IllnessQuestion, props: {} },
    {
      component: FrequencyQuestion,
      props: { ref: frequencyRef, isMale: genderRef.current?.getAnswer() },
    },
    { component: SportQuestion, props: { ref: sportQuestionRef } },
    { component: SleepQuestion, props: { ref: sleepQuestionRef } },
  ];

  const goNext = () => {
    if (currentQuestionIndex < questions.length - 1) {
      setCurrentQuestionIndex(currentQuestionIndex + 1);
    } else {
      Collect();
    }
  };

  function Collect() {
    if (session) {
      session.healthProblems = [];

      session.goals = goalRef.current?.getAnswer();
      session.sexe = genderRef.current?.getAnswer();
      session.weight = weightRef.current?.getAnswer();
      session.height = heightRef.current?.getAnswer();
      session.age = ageRef.current?.getAnswer();
      session.sportLevel = activityRef.current?.getAnswer();
      session.nbSessionPerWeek = frequencyRef.current?.getAnswer();
      session.sports = sportQuestionRef.current?.getAnswer();
      session.sleepLevel = sleepQuestionRef.current?.getAnswer();
      signIn(session);
    }

    router.replace("/(tabs)/(home)/HomeScreen");
  }

  return (
    <Screen>
      <View className="gap-4 justify-between h-full">
        <View className="flex-row justify-between items-center gap-4">
          <BackButton
            className="mt-2"
            onPress={() => {
              if (currentQuestionIndex === 0) {
                router.replace("/(auth)/log-in");
              } else {
                setCurrentQuestionIndex((i) => Math.max(i - 1, 0));
              }
            }}
            icon={currentQuestionIndex === 0 ? "close" : "arrowleft"}
          />
          <Text size="2xl" weight="bold">
            Questionnaire
          </Text>
          <View className={"px-4 py-2 rounded-2xl" + " " + toBgColor("blue")}>
            <Text className={toTextColor("blue")} weight="bold">
              {currentQuestionIndex + 1} sur {questions.length}
            </Text>
          </View>
        </View>
        {questions.map((question, index) =>
          React.createElement(question.component, {
            isVisible: index === currentQuestionIndex,
            key: index,
            ...question.props,
          })
        )}
        <Button afterIcon="arrowright" onPress={goNext}>
          {currentQuestionIndex == questions.length - 1
            ? "Terminer"
            : "Suivant"}
        </Button>
      </View>
    </Screen>
  );
}