webtrigon-job-portal/src/pages/quiz/Options.tsx

import { IonButton, IonCheckbox, IonItem, IonLabel, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
import { useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import styles from './Options.module.scss';
import { OptionType } from '../../models/QuizDetails'
import RadioButton from '../../components/RadioButton/RadioButton';

interface OwnProps {
    options: string[] | undefined;
    type: OptionType;
    answer: string[];
    lastQuestion: boolean;
    questionNumber: number;
    updateQuestionNumber: () => void;
}

const Options: React.FC<OwnProps> = (props) => {

    const [selected, setSelected] = useState<string | undefined>(undefined);
    const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
    const [textInput, setTextInput] = useState<string>("");
    const [answers, setAnswers] = useState<number>(0);
    const inputRef = useRef<HTMLTextAreaElement>(null);

    useEffect(() => {
        setSelected("");
        setSelectedOptions([]);
        setTextInput("");

    }, [props.questionNumber]);

    const selectChecked = (option: string) => {
        let newOption: string[] = [];
        if (selectedOptions.includes(option)) {
            newOption = selectedOptions.filter(oldOption => oldOption !== option);
        } else {
            newOption = selectedOptions.concat([option]);
        }
        setSelectedOptions(newOption);
    }

    const validateAnswer = () => {
        if (props.type === "singleSelect") {
            if (props.answer.includes(selected!)) {
                setAnswers(answers + 1);
            }
        } else if (props.type === "multiSelect") {
            if (props.answer.length === selectedOptions.length &&
                props.answer.sort().join(',') === selectedOptions.sort().join(',')) {

                setAnswers(answers + 1);
            }
        } else if (props.type === "textInput") {
            if (props.answer.includes(textInput)) {
                setAnswers(answers + 1);
            }
        }
    }

    const handleInput = () => {
        setTextInput(inputRef.current?.value!);
    }

    const setAnswer = () => {
        localStorage.setItem("answer", answers.toString());
    }

    const options = props.options!.map((option, key) => {
        return (
            <div key={key} onClick={() => setSelected(option)}>
                <RadioButton option={option} isChecked={selected === option} />
            </div>
        );
    });

    const MultiSelectOptions = props.options!.map((option, key) => {
        return (
            <div key={key} onClick={() => selectChecked(option)}>
                <RadioButton
                    isCheckBox={true}
                    option={option}
                    isChecked={selectedOptions.includes(option)} />
            </div>
        );
    });

    return (
        <div className={styles.optionHolder}>
            <IonList>
                {props.type === "singleSelect" &&
                    <div className={styles.options}>
                        {options}
                    </div>
                }
                {props.type === "multiSelect" &&
                    <div className={styles.options}>
                        {MultiSelectOptions}
                    </div>
                }
                {props.type === "textInput" &&
                    <div className={styles.options}>
                        <textarea
                            className={styles.textInput}
                            rows={20}
                            cols={35}
                            placeholder="enter your answer here"
                            ref={inputRef}
                            onChange={handleInput}>
                        </textarea>
                    </div>
                }
            </IonList>

            {!props.lastQuestion &&
                <div className={styles.button + " " + ((selected || selectedOptions.length > 0 || textInput) ? styles.active : "")}
                    onClick={(selected || selectedOptions.length > 0 || textInput) ? () => { props.updateQuestionNumber(); validateAnswer(); } : undefined}>
                    <IonButton shape="round" expand='block'>Next</IonButton>
                </div>
            }

            {props.lastQuestion &&
                < Link to="/preliminaryRoundResults" onClick={setAnswer} className={styles.button + " " + ((selected || selectedOptions.length > 0 || textInput) ? styles.active : "")}>
                    <IonButton shape="round" expand='block'>Next Step</IonButton>
                </Link>
            }
        </div >
    );
}

export default Options;