import React from "react";
import Question, { QuestionChildProps } from "./Question";
import Checkbox from "../CheckboxComponent";
import {View} from "react-native";
import {FontAwesome6} from "@expo/vector-icons";

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(true);
        const handleChangeOne = () => {
            if(!checkedOne)
            {
                setCheckedOne(!checkedOne);
                setCheckedTwo(false);
                setCheckedThree(false);
            }
        };
        const handleChangeTwo = () => {
            if(!checkedTwo) {
                setCheckedOne(false);
                setCheckedTwo(!checkedTwo);
                setCheckedThree(false);
            }
        };
        const handleChangeThree = () => {
            if(!checkedThree) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(!checkedThree);
            }
        };

        return (
            <Question
                question="Quel est votre genre physiologique ?"
                {...ref}
                {...rest}
            >
                <View>
                    <Checkbox label="Homme" value={checkedOne} onChange={handleChangeOne} icon={"man"} />
                    <Checkbox label="Femme" value={checkedTwo} onChange={handleChangeTwo} icon={"woman"} />
                    <Checkbox label="Je ne préfère pas répondre" value={checkedThree} onChange={handleChangeThree} icon={"minuscircle"} />
                </View>
            </Question>
        );
    }
);