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

//@ts-ignore
import BenchImage from "@/assets/images/bench.png";
import CheckBox from "../CheckBox";

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

export default forwardRef<BeginnerQuestionRef, QuestionChildProps>(
  (props, ref): ReactElement => {
    const [answer, setAnswer] = useState<boolean>(false);

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

    function handleChangeOne() {
      setAnswer(true);
    }

    function handleChangeTwo() {
      setAnswer(false);
    }

    return (
      <Question
        question="Êtes-vous un novice de la musculation ?"
        {...ref}
        {...props}
      >
        <Image className="self-center" source={BenchImage} alt="" />
        <View>
          <CheckBox
            className=""
            label="Oui"
            value={answer}
            onChange={handleChangeOne}
            fontAwesomeIcon={"check"}
          />
          <CheckBox
            label="Non"
            value={!answer}
            onChange={handleChangeTwo}
            entypoIcon={"cross"}
          />
        </View>
      </Question>
    );
  }
);