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 { useEffect, useState } from 'react';
import Question from './Question';
import quizDetails from '../../mockData/QuizDetails';

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

    const [questionNumber, setQuestionNumber] = useState<number>(1);

    const updateQuestionNumber = () => {
        console.log("update")
        if (quizDetails.length > questionNumber) {
            setQuestionNumber((questionNumber) => questionNumber + 1);
        }
    }
    console.log("no", questionNumber);
    console.log(quizDetails[questionNumber - 1]);

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

                <Question question={quizDetails[questionNumber - 1].question}
                    questionNumber={questionNumber}
                    timeLimit={quizDetails[questionNumber - 1].timeLimit}
                    updateQuestionNumber={updateQuestionNumber} />

            </div>

            <div className={styles.quizOptions}>
                <div className={styles.options}>
                    <Options options={quizDetails[questionNumber - 1].options} updateQuestionNumber={updateQuestionNumber} />
                </div>

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

            </div>

        </div>
    );
}

export default Quiz;