import React, { useState, useEffect } from "react";

interface Questiondata {
    questionId: number;
    questionText: string;
    option1: string;
    option2: string;
    option3: string;
    option4: string;
    correctAnswer: string;
    quizId: string | null;
    moduleId: string;
}

interface Answerdata {
    questionId: number;
    selectedOption: string;
}

export default function QuizIndex() {
    const [questionData, setQuestionsData] = useState<Questiondata[]>([]);
    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
    const [selectedOption, setSelectedOption] = useState<string>('');
    const [answers, setAnswers] = useState<Answerdata[]>([]);
    const [loading, setLoading] = useState(true); // Set to true initially to show loading
    const [error, setError] = useState<Error | null>(null);

    useEffect(() => {
        fetch(`https://api.teachertrainingkolkata.in/api/question-list`)
            .then(res => {
                if (!res.ok) {
                    throw new Error('Network response was not ok');
                }
                return res.json();
            })
            .then(data => {
                console.log('Question Data', data);
                setQuestionsData(data);
                setLoading(false);
            })
            .catch(error => {
                console.error('An error occurred', error);
                setError(error);
                setLoading(false);
            });
    }, []);

    if (loading) {
        return <div>Loading...</div>;
    }

    if (error) {
        return <div>Error: {error.message}</div>;
    }

    const handleOptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setSelectedOption(event.target.value);
    };

    const handleNextQuestion = () => {
        setAnswers([...answers, {
            questionId: questionData[currentQuestionIndex].questionId,
            selectedOption: selectedOption
        }]);
        console.log(answers);
        setSelectedOption('');
        setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questionData.length);
    };

    const currentQuestion = questionData[currentQuestionIndex];

    return (
        <div>
            <section className="container mx-auto px-4">
                <div>
                    <div key={currentQuestion.questionId}>
                        <h2>#{currentQuestion.questionId} {currentQuestion.questionText}</h2>
                        <ul>
                            <li>
                                <label>
                                    <input
                                        type="radio"
                                        value={currentQuestion.option1}
                                        checked={selectedOption === currentQuestion.option1}
                                        onChange={handleOptionChange}
                                    />
                                    {currentQuestion.option1}
                                </label>
                            </li>
                            <li>
                                <label>
                                    <input
                                        type="radio"
                                        value={currentQuestion.option2}
                                        checked={selectedOption === currentQuestion.option2}
                                        onChange={handleOptionChange}
                                    />
                                    {currentQuestion.option2}
                                </label>
                            </li>
                            <li>
                                <label>
                                    <input
                                        type="radio"
                                        value={currentQuestion.option3}
                                        checked={selectedOption === currentQuestion.option3}
                                        onChange={handleOptionChange}
                                    />
                                    {currentQuestion.option3}
                                </label>
                            </li>
                            <li>
                                <label>
                                    <input
                                        type="radio"
                                        value={currentQuestion.option4}
                                        checked={selectedOption === currentQuestion.option4}
                                        onChange={handleOptionChange}
                                    />
                                    {currentQuestion.option4}
                                </label>
                            </li>
                        </ul>
                    </div>
                    <button onClick={handleNextQuestion}>Next Question</button>
                </div>
            </section>
        </div>
    );
}