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'

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(undefined);
        setSelectedOptions([]);
        setTextInput("");
    }, [props.options]);

    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 (
            <IonItem lines='none' key={key} className={(option === selected) ? styles.highlighted : ""}>
                <IonLabel>{option}</IonLabel>
                <IonRadio mode='md' slot="start" value={option} />
            </IonItem>
        );
    });

    const MultiSelectOptions = props.options!.map((option, key) => {
        return (
            <IonItem lines='none' key={key} className={(selectedOptions.includes(option)) ? styles.highlighted : ""}>
                <div className={(selectedOptions.includes(option)) ? (styles.activeCheck + " " + styles.checkBoxHolder) : styles.checkBoxHolder}>
                    <IonCheckbox
                        slot="start"
                        mode='ios'
                        className={styles.checkBox}
                        onIonChange={e => selectChecked(option)} />
                </div>
                <IonLabel className={styles.multiSelectLabel}>{option}</IonLabel>
            </IonItem>
        );
    });

    return (
        <div className={styles.optionHolder}>
            <IonList>
                {props.type === "singleSelect" &&
                    <IonRadioGroup onIonChange={e => setSelected(e.detail.value)} allowEmptySelection={true} className={styles.options}>
                        {options}
                    </IonRadioGroup>
                }
                {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;