// NOTE: The comment sections inside the index.html file is an example of how suppose to be structured the current elements.
//       - You can use them as an example when you create those elements, to check how they will be displayed, just uncomment them.
//       - Also keep in mind that, the actual skeleton in judge does not have this comment sections. So do not be dependent on them!
//       - Тhey are present in the skeleton just to help you!


// This function will be invoked when the html is loaded. Check the console in the browser or index.html file.
function mySolution(){

    let textarea = document.getElementsByTagName('textarea')[0];
    let btn = document.getElementsByTagName('button')[0];
    let pendingQuestions = document.getElementById('pendingQuestions');
    let openQuestions = document.getElementById('openQuestions');
    let username = document.getElementsByTagName('input')[0];

    btn.addEventListener('click', function(){

        if (textarea.value != '') {
            let div1 = document.createElement('div');
            div1.classList.add('pendingQuestion');
            pendingQuestions.appendChild(div1);

            let img = document.createElement('img');
            img.setAttribute('src', './images/user.png');
                img.width = "32";
                img.height = "32"
            div1.appendChild(img);

            let span = document.createElement('span');
            if (username.value != '') {
                span.textContent = username.value;
            }
            else {
                span.textContent = 'Anonymous'
            }
            div1.appendChild(span);

            let p = document.createElement('p');
            p.textContent  = textarea.value;
            div1.appendChild(p);

            // ---
            let div2 = document.createElement('div');
            div2.classList.add("actions");

            let btn1 = document.createElement('button');
            btn1.classList.add("archive");
            btn1.textContent = 'Archive'

            let btn2 = document.createElement('button');
            btn2.className = 'open';
            btn2.textContent = 'Open';

            div1.appendChild(div2);
            div2.appendChild(btn1);
            div2.appendChild(btn2);

            username.value = ''
            textarea.value = '';

            btn1.addEventListener('click', function() {
                div1.remove()
            })

            btn2.addEventListener('click', function() {

                let div1open = document.createElement('div');
                div1open.classList.add('openQuestion');
                openQuestions.appendChild(div1open);

                let imgOpen = document.createElement('img');
                imgOpen.setAttribute('src', './images/user.png');
                imgOpen.width = "32";
                imgOpen.height = "32"
                div1open.appendChild(imgOpen);

                let spanOpen = document.createElement('span');
                if (span.textContent != '') {
                    spanOpen.textContent = span.textContent;
                }
                else {
                    spanOpen.textContent = 'Anonymous'
                }
                div1open.appendChild(spanOpen);

                let pOpen = document.createElement('p');
                pOpen.textContent  = p.textContent;
                div1open.appendChild(pOpen);

                div1.remove();

                // ---

                let div2Open = document.createElement('div');
                div2Open.classList.add("actions");

                let btn1Open = document.createElement('button');
                btn1Open.classList.add("reply");
                btn1Open.textContent = 'Reply'

                div1open.appendChild(div2Open);
                div2Open.appendChild(btn1Open);

                // --

                let div = document.createElement('div');
                div.classList.add("replySection");
                div1open.appendChild(div);

                let inputReplay = document.createElement('input');
                inputReplay.classList.add("replyInput");
                inputReplay.type = "text";
                inputReplay.placeholder = "Reply to this question here...";
                div.appendChild(inputReplay);

                let btnReplay = document.createElement('button');
                btnReplay.classList.add("replyButton");
                btnReplay.textContent = 'Send'
                div.appendChild(btnReplay);

                let olReplay = document.createElement('ol');
                olReplay.classList.add("reply");
                olReplay.type = '1'
                div.appendChild(olReplay);

                div.style.display = 'none';

                btn1Open.addEventListener('click', () => {// Промяна
                    btnReplay.addEventListener('click', function() {
                        if (inputReplay.value!=''){
                            let li = document.createElement('li');
                            li.textContent = inputReplay.value;
                            inputReplay.value = '';
                            inputReplay.placeholder = "Reply to this question here...";
                            olReplay.appendChild(li)
                        }
                    })
                    switch (btn1Open.textContent) {
                        case 'Reply':
                            div.style.display = 'block';
                            btn1Open.textContent = 'Back';
                            break;
                        case 'Back':
                            btn1Open.textContent = 'Reply';
                            div.style.display = 'none';
                            break;
                    }
                }); // Край промяна
            })
        }
    })


//  console.log("GOOD LUCK c(:");
}
// To check out your solution, just submit mySolution() function in judge system.