import styles from './Quiz.module.scss';

import { IonButton, IonIcon } from '@ionic/react';
import Options from './Options';
import { closeOutline } from 'ionicons/icons'
import { Link } from 'react-router-dom';
import { useState } from 'react';
import Question from './Question';


const options: string[] = [
    "System.out.println(“Hello, how are you?”);",
    "println('Hello, how are you?');",
    "out.print(Hello, how are you?);",
    "System.out.println(Hello, how are you?);"
];

const Quiz: React.FC = () => {

    const [selected, setSelected] = useState<boolean>(false);

    const isSelected = (option: string) => {

        if (option !== "null") {
            setSelected(true);
        }
    }

    return (
        <div className={styles.quizContainer}>
            <div className={styles.upfold}>
                <header className={styles.header}>
                    <h4 className={styles.heading}>Quiz</h4>
                    <IonIcon icon={closeOutline} />
                </header>

                <Question question='How would you correctly display, “Hello, how are you?”?'
                    questionNumber={1}
                    timeLimit={1} />

            </div>

            <div className={styles.quizOptions}>
                <div className={styles.options}>
                    <Options options={options} isSelected={isSelected} />
                </div>

                <Link to="/" className={styles.button + " " + (selected ? styles.active : "")}>
                    <IonButton shape="round" expand='block'>Next</IonButton>
                </Link>
            </div>

        </div>
    );
}

export default Quiz;