const yourQuiz = []
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_lettter" 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>
    `


    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_lettter" 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();
        
        const questionCust = document.querySelector('#customerQuestion').value;
        const letterCust = document.querySelector('.constructor_answer_lettter').value;
        const answerCust = document.querySelector('.constructor_answer').value;
        yourQuiz.push(new Question(questionCust, letterCust, answerCust))
        setConstructorToLS(yourQuiz);
        templateForm.remove();
        buildConstructor();
    }
    console.log(yourQuiz)
}
titleQuiz = document.querySelector('#titleQuiz')


class Question {
    constructor(questionCust, answerCust, letterCust) {
        
    this.question = questionCust;
    this.answers = {letterCust: answerCust};
    this.correctAnswer = document.querySelector('#correct_answer_letter').value;  
    } 
   
}       
    
createQuizBtn.onclick = (e) => {
    e.preventDefault();
    e.stopPropagation();
    document.querySelector('#button-block').setAttribute('display', 'none');
    buildConstructor();
}