Mobile/components/quiz/SportQuestion.tsx

import React from "react";
import Question, { QuestionChildProps } from "./Question";
import CheckButton from "../CheckButtonComponent";
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 [checkedSix, setCheckedSix] = React.useState(false);
        const [checkedSeven, setCheckedSeven] = React.useState(false);
        const [checkedEight, setCheckedEight] = React.useState(false);
        const [checkedNine, setCheckedNine] = React.useState(false);
        const handleChangeOne = () => {
            if(!checkedOne) {
                setCheckedOne(!checkedOne);
                setCheckedTwo(false);
                setCheckedThree(false);
                setCheckedFour(false);
                setCheckedFive(false);
                setCheckedSix(false);
                setCheckedSeven(false);
                setCheckedEight(false);
                setCheckedNine(false);
            }
        };
        const handleChangeTwo = () => {
            if(!checkedTwo) {
                setCheckedOne(false);
                setCheckedTwo(!checkedTwo);
                setCheckedThree(false);
                setCheckedFour(false);
                setCheckedFive(false);
                setCheckedSix(false);
                setCheckedSeven(false);
                setCheckedEight(false);
                setCheckedNine(false);
            }
        };
        const handleChangeThree = () => {
            if(!checkedThree) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(!checkedThree);
                setCheckedFour(false);
                setCheckedFive(false);
                setCheckedSix(false);
                setCheckedSeven(false);
                setCheckedEight(false);
                setCheckedNine(false);
            }
        };
        const handleChangeFour = () => {
            if(!checkedFour) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(false);
                setCheckedFour(!checkedFour);
                setCheckedFive(false);
                setCheckedSix(false);
                setCheckedSeven(false);
                setCheckedEight(false);
                setCheckedNine(false);
            }
        };
        const handleChangeFive = () => {
            if(!checkedFive) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(false);
                setCheckedFour(false);
                setCheckedFive(!checkedFive);
                setCheckedSix(false);
                setCheckedSeven(false);
                setCheckedEight(false);
                setCheckedNine(false);
            }
        };
        const handleChangeSix = () => {
            if(!checkedSix) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(false);
                setCheckedFour(false);
                setCheckedFive(false);
                setCheckedSix(!checkedSix);
                setCheckedSeven(false);
                setCheckedEight(false);
                setCheckedNine(false);
            }
        };
        const handleChangeSeven = () => {
            if(!checkedSeven) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(false);
                setCheckedFour(false);
                setCheckedFive(false);
                setCheckedSix(false);
                setCheckedSeven(!checkedSeven);
                setCheckedEight(false);
                setCheckedNine(false);
            }
        };
        const handleChangeEight = () => {
            if(!checkedEight) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(false);
                setCheckedFour(false);
                setCheckedFive(false);
                setCheckedSix(false);
                setCheckedSeven(false);
                setCheckedEight(!checkedEight);
                setCheckedNine(false);
            }
        };
        const handleChangeNine = () => {
            if(!checkedNine) {
                setCheckedOne(false);
                setCheckedTwo(false);
                setCheckedThree(false);
                setCheckedFour(false);
                setCheckedFive(false);
                setCheckedSix(false);
                setCheckedSeven(false);
                setCheckedEight(false);
                setCheckedNine(!checkedNine);
            }
        };

        return (
            <Question
                question="Quel sport  ?"
                {...ref}
                {...rest}
            >
                <View className={`flex-wrap flex-row`}>
                    <CheckButton label="Course" value={checkedOne} onChange={handleChangeOne} fontAwesomeIcon={"person-running"} />
                    <CheckButton label="Marche" value={checkedTwo} onChange={handleChangeTwo} fontAwesomeIcon={"person-walking"} />
                    <CheckButton label="Rando" value={checkedThree} onChange={handleChangeThree} fontAwesomeIcon={"person-hiking"} />

                    <CheckButton label="Skate" value={checkedFour} onChange={handleChangeFour} communityIcon={"skateboarding"} />
                    <CheckButton label="Cyclisme" value={checkedFive} onChange={handleChangeFive} communityIcon={"bike"} />
                    <CheckButton label="Basket" value={checkedSix} onChange={handleChangeSix} fontAwesomeIcon={"basketball"} />

                    <CheckButton label="Cardio" value={checkedSeven} onChange={handleChangeSeven} antIcon={"heart"} />
                    <CheckButton label="Yoga" value={checkedEight} onChange={handleChangeEight} communityIcon={"yoga"} />
                    <CheckButton label="Autre" value={checkedNine} onChange={handleChangeNine} antIcon={"setting"} />
                </View>
            </Question>
        );
    }
);