const yourQuiz = []
const createQuizBtn = document.getElementById('create_constructor')
createQuizBtn.onclick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    document.querySelector('#button-block').setAttribute('display', 'none');
    buildConstructor();
}
const titleOfQuiz = () => {
    const header = document.querySelector('.main-header')
    const userQuizTitle = document.createElement('h2')
}
const buildConstructor = () => {
    const templateForm = document.createElement('form')
    templateForm.className = "template_form"
    templateForm.innerHTML = `<fieldset>
                                <legend>Quiz Constructor</legend>
                                <p><label for="titleQuiz">Quiz Title</label><input type="text" id="titleQuiz" placeholder="Enter the title of your Quiz"></p>
                                <p><label for="customerQuestion">Question</label><input type="text" id="customerQuestion" placeholder="Enter a question"></p>
                                <div class="constructor_answers">
                                <p><label>Answers</label></p>
                                <p>
                                <input type="text" id="answer_letter" class="constructor_answer_letter" placeholder="Enter a letter(ex: a or b or c or d)">
                                <input type="text" class="constructor_answer" placeholder="Enter an answer"></p>
                                </div>
                                <div>
                                    <button type="button" class="add_answer">Add answer</button>
                                </div>
                                <p><label for="correct_answer_letter">Enter the letter of the correct answer(ex: a or b or c or d)</label>
                                <input type="text" id="correct_answer_letter" class="constructor_correct_answer_lettter" placeholder="Enter the letter of the correct answer"></p>
                            </fieldset>
                            <button type="submit" class="add_question" id="add_question">Add a question</button>
                            <button type="submit" class="start_your_quiz" id="start_your_quiz">Start Your Quiz</button>
    `


    document.querySelector('#quiz_constructor').appendChild(templateForm);
    document.querySelector('.add_answer').onclick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        let answerContainer = document.querySelector('.constructor_answers');
        const frame = document.createElement('p');
        frame.innerHTML = `
                            <input type="text" id="answer_letter" class="constructor_answer_letter" placeholder="Enter a letter">
                            <input type="text" class="constructor_answer" placeholder="Enter an answer">`
        answerContainer.appendChild(frame);                   
    }
    document.querySelector('.add_question').onclick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        
        
        yourQuiz.push(newQuestion())
        setConstructorToLS(yourQuiz);
        templateForm.remove();
        buildConstructor();
    }
    console.log(yourQuiz)
    const btnStartYourQuiz = document.getElementById('btnStart');
    btnStartYourQuiz.onclick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        setConstructorToLS();
        templateForm.remove();
        initializeClock('countdown', deadline);
        buildQuiz();
        localStorage.setItem('timeinterval', initializeClock('countdown', deadline));
    }
}
titleQuiz = document.querySelector('#titleQuiz')



const newQuestion = () => {
    const questionCust = document.querySelector('#customerQuestion').value;
    const letterCust = document.querySelector('.constructor_answer_letter').value;
    const answerCust = document.querySelector('.constructor_answer').value;
    const correctAnswerLetter = document.querySelector('#correct_answer_letter').value;
    let answers = []
    
    for (letterCust in questionCust.answers) {
        answerCust = questionCust.answers[letterCust]
        answers.push(`${letterCust} : ${answerCust}`)
}   
   
    
    return {
        question: questionCust,
        answers: {...[answers].map(item => item.key)}, 
        
        correctAnswer: correctAnswerLetter
    }
}