import React from 'react'

export default function Quizzical() {
    const [quizzState, setQuizzState] = React.useState([])

    async function getQuestions() {
        let response = await fetch("https://opentdb.com/api.php?amount=5")
        let data = await response.json()
        return data;
    }

    function prepareQuestions(data) {
        let objectArray = []

        data.map(item => {
            let answersArray = []
            item.incorrect_answers.map(ans => answersArray.push(ans))
            answersArray.splice(Math.floor(Math.random() * answersArray.length), 0, item.correct_answer)
          

            objectArray.push({
                answers: answersArray,
                question: item.question,
                correct: item.correct_answer,
                chosen: null
            })
        })

        return objectArray
    }

    React.useEffect(() => {
        getQuestions().then(data => setQuizzState(prepareQuestions(data.results)))
    }, [])

    
    function setAnswer(id, answerID) {
        let obj = quizzState[1]
        console.log(obj)
        // setQuizzState(prev => {
        //     return [...prev]
        // })
    }

    function answerClicked(id, answer) {
        console.log(id, answer)
    }

    setAnswer()

    return (
        <div className="quizzical-app">
            
        </div>
    )
}