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

export interface GoalQuestionRef {
  getAnswer: () => string[];
}

export default React.forwardRef<GoalQuestionRef, QuestionChildProps>(
  ({ ...props }, ref): React.ReactElement => {
    const [checkedOne, setCheckedOne] = React.useState(true);
    const [checkedTwo, setCheckedTwo] = React.useState(false);
    const [checkedThree, setCheckedThree] = React.useState(false);
    const [checkedFour, setCheckedFour] = React.useState(false);
    const [checkedFive, setCheckedFive] = React.useState(false);

    useImperativeHandle(ref, () => ({
      getAnswer: () => {
        const goals = [];
        if (checkedOne) {
          goals.push("Perte de poids");
        }
        if (checkedTwo) {
          goals.push("Renforcement musculaire");
        }
        if (checkedThree) {
          goals.push("Prise de masse");
        }
        if (checkedFour) {
          goals.push("Amélioration endurance");
        }
        if (checkedFive) {
          goals.push("Maintenir en forme");
        }
        return goals;
      },
    }));

    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}
        {...props}
      >
        <View>
          <Checkbox
            label="Perte de poids"
            value={checkedOne}
            onChange={handleChangeOne}
            communityIcon={"weight"}
          />
          <Checkbox
            label="Renforcement musculaire"
            value={checkedTwo}
            onChange={handleChangeTwo}
            antIcon={"rest"}
          />
          <Checkbox
            label="Prise de masse"
            value={checkedThree}
            onChange={handleChangeThree}
            communityIcon={"beer"}
          />
          <Checkbox
            label="Amélioration endurance"
            value={checkedFour}
            onChange={handleChangeFour}
            antIcon={"linechart"}
          />
          <Checkbox
            label="Maintenir en forme"
            value={checkedFive}
            onChange={handleChangeFive}
            antIcon={"linechart"}
          />
        </View>
      </Question>
    );
  }
);