import React, {
  forwardRef,
  ReactElement,
  useImperativeHandle,
  useState,
} from "react";
import { View } from "react-native";
import Checkbox from "../CheckBox";
import Question, { QuestionChildProps } from "./Question";

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

export default forwardRef<GenderQuestionRef, QuestionChildProps>(
  ({ ...props }, ref): ReactElement => {
    const [answer, setAnswer] = 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 className="gap-2">
          <Checkbox
            label="Homme"
            value={answer}
            onChange={handleChangeOne}
            antIcon={"man"}
            isCheckIconVisible={true}
          />
          <Checkbox
            label="Femme"
            value={!answer}
            onChange={handleChangeTwo}
            antIcon={"woman"}
            isCheckIconVisible={true}
          />
        </View>
      </Question>
    );
  }
);