import BackButton from "@/components/BackButton";
import { toBgColor, toTextColor } from "@/components/Constants";
import Button from "@/components/ui/Button";
import Screen from "@/components/ui/Screen";
import Text from "@/components/ui/Text";
import React from "react";
import { View } from "react-native";
import FrequencyQuestion from "@/components/quiz/FrequencyQuestion";
import GoalQuestion from "@/components/quiz/GoalQuestion";
import GenderQuestion from "@/components/quiz/GenderQuestion";
import WeightQuestion from "@/components/quiz/WeightQuestion";
import HeightQuestion from "@/components/quiz/HeightQuestion";
import AgeQuestion from "@/components/quiz/AgeQuestion";
import BeginnerQuestion from "@/components/quiz/BeginnerQuestion";
import LvlQuestion from "@/components/quiz/LvlQuestion";
import SleepQuestion from "@/components/quiz/SleepQuestion";
import SportQuestion from "@/components/quiz/SportQuestion";

export default function Quiz() {
  const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
  interface Question<T = any> {
    component: React.ForwardRefExoticComponent<T & React.RefAttributes<any>>;
    props: T;
  }
  const questions: Question[] = [
    { component: GoalQuestion, props: {} },
    { component: GenderQuestion, props: {} },
    { component: WeightQuestion, props: {} },
    { component: HeightQuestion, props: {} },
    { component: AgeQuestion, props: {} },
    { component: BeginnerQuestion, props: {} },
    { component: LvlQuestion, props: {} },
    { component: FrequencyQuestion, props: { isMale: true } },
    { component: SportQuestion, props: {} },
    { component: SleepQuestion, props: {} },
  ];

  const goBack = () => {
    if (currentQuestionIndex >= 1) {
      setCurrentQuestionIndex(currentQuestionIndex - 1);
    }
  };

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

  return (
    <Screen>
      <View className="gap-4 justify-between h-full">
        <View className="flex-row justify-between items-center">
          <BackButton onPress={goBack} />
          <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}>
          Suivant
        </Button>
      </View>
    </Screen>
  );
}