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

export interface GenderQuestionRef {
  getAnswer: () => boolean;
}

export default React.forwardRef<GenderQuestionRef, QuestionChildProps>(
  ({ ...props }, ref): React.ReactElement => {
    const [answer, setAnswer] = React.useState(true);

    useImperativeHandle(ref, () => ({
      getAnswer: () => answer,
    }));

    const handleChangeOne = () => {
      setAnswer(true);
    };
    const handleChangeTwo = () => {
      setAnswer(false);
    };

    return (
      <Question
        question="Quel est votre genre physiologique ?"
        {...ref}
        {...props}
      >
        <View>
          <Checkbox
            label="Homme"
            value={answer}
            onChange={handleChangeOne}
            antIcon={"man"}
          />
          <Checkbox
            label="Femme"
            value={!answer}
            onChange={handleChangeTwo}
            antIcon={"woman"}
          />
        </View>
      </Question>
    );
  }
);