Mobile/components/quiz/ActivityQuestion.tsx

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(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);
        const handleChangeOne = () => {
            if(!checkedOne) {
                setCheckedOne(!checkedOne);
                setCheckedTwo(false);
                setCheckedThree(false);
                setCheckedFour(false);
                setCheckedFive(false);
            }
        };
        const handleChangeTwo = () => {
            if(!checkedTwo) {
                setCheckedOne(false);
                setCheckedTwo(!checkedTwo);
                setCheckedThree(false);
                setCheckedFour(false);
                setCheckedFive(false);
            }
        };
        const handleChangeThree = () => {
            if(!checkedThree) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(!checkedThree);
                setCheckedFour(false);
                setCheckedFive(false);
            }
        };
        const handleChangeFour = () => {
            if(!checkedFour) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(false);
                setCheckedFour(!checkedFour);
                setCheckedFive(false);
            }
        };
        const handleChangeFive = () => {
            if(!checkedFive) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(false);
                setCheckedFour(false);
                setCheckedFive(!checkedFive);
            }
        };

        return (
            <Question
                question="Comment estimez-vous votre niveau d'activité ?"
                {...ref}
                {...rest}
            >
                <View>
                    <Checkbox label="Athlète" value={checkedOne} onChange={handleChangeOne} icon={"smile-circle"} />
                    <Checkbox label="Très sportif" value={checkedTwo} onChange={handleChangeTwo} icon={"smileo"} />
                    <Checkbox label="Un peu sportif" value={checkedThree} onChange={handleChangeThree} icon={"meh"} />
                    <Checkbox label="Peu sportif" value={checkedFour} onChange={handleChangeFour} icon={"frowno"} />
                    <Checkbox label="Pas du tout sportif" value={checkedFive} onChange={handleChangeFive} icon={"frown"} />
                </View>
            </Question>
        );
    }
);