import BackButton from "@/components/BackButton";
import { toBgColor, toTextColor } from "@/components/Constants";
import HeightQuestion from "@/components/quiz/HeightQuestion";
import { QuestionChildProps } from "@/components/quiz/Question";
import WeightQuestion from "@/components/quiz/WeightQuestion";
import Button from "@/components/ui/Button";
import Screen from "@/components/ui/Screen";
import Text from "@/components/ui/Text";
import React, { ForwardRefExoticComponent, RefAttributes } from "react";
import { View } from "react-native";

export default function Quiz() {
  const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0);
  const questions: ForwardRefExoticComponent<
    QuestionChildProps & RefAttributes<any>
  >[] = [WeightQuestion, HeightQuestion];

  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((QuestionComponent, index) => (
          <React.Fragment key={index}>
            {index == currentQuestionIndex && (
              <QuestionComponent isVisible={true} />
            )}
          </React.Fragment>
        ))}
        <Button afterIcon="arrowright" onPress={goNext}>
          Suivant
        </Button>
      </View>
    </Screen>
  );
}