import React from "react";
import Question, { QuestionChildProps } from "./Question";
import Checkbox from "../CheckboxComponent";
import {View} from "react-native";

export default React.forwardRef<any, QuestionChildProps>(
  (props, ref): React.ReactElement => {
    const { ...rest } = props;

    const [checkedOne, setCheckedOne] = React.useState(false);
    const [checkedTwo, setCheckedTwo] = React.useState(false);
    const [checkedThree, setCheckedThree] = React.useState(false);
    const [checkedFour, setCheckedFour] = React.useState(false);
    const [checkedFive, setCheckedFive] = React.useState(false);
    const handleChangeOne = () => {
        setCheckedOne(!checkedOne);
    };
  const handleChangeTwo = () => {
      setCheckedTwo(!checkedTwo);
  };
  const handleChangeThree = () => {
      setCheckedThree(!checkedThree);
  };
  const handleChangeFour = () => {
      setCheckedFour(!checkedFour);
  };
  const handleChangeFive = () => {
      setCheckedFive(!checkedFive);
  };

    return (
      <Question
        question="Quel est votre objectif dans l'application ?"
        {...ref}
        {...rest}
      >
          <View>
              <Checkbox label="Perte de poids" value={checkedOne} onChange={handleChangeOne} />
              <Checkbox label="Renforcement musculaire" value={checkedTwo} onChange={handleChangeTwo} />
              <Checkbox label="Prise de masse" value={checkedThree} onChange={handleChangeThree} />
              <Checkbox label="Amélioration endurance" value={checkedFour} onChange={handleChangeFour} />
              <Checkbox label="Maintenir en forme" value={checkedFive} onChange={handleChangeFive} />
          </View>
      </Question>
    );
  }
);