// This function will be invoked when the html is loaded. Check the console in the browser or index.html file.
const inputSection = document.getElementById('inputSection');
const textInput = inputSection.getElementsByTagName('textarea')[0];
const usernameInput = inputSection.getElementsByTagName('input')[0];
const sendBtn = inputSection.getElementsByTagName('button')[0];
const pendingQs = document.getElementById("pendingQuestions");
const openQs = document.getElementById("openQuestions");

function mySolution() {
    sendBtn.addEventListener("click", () => {
        const nickName = usernameInput.value ? usernameInput.value : "Anonymous";
        const pendingQuestion = createPendingQuestion(textInput.value, nickName);
        pendingQs.appendChild(pendingQuestion);
    })
}

function createPendingQuestion(questionText, usernameText) {
    var newElement = createElement("div", null, "pendingQuestion");

    var img = createElement("img");
    img.src = "./images/user.png";

    var username = createElement("span", usernameText);
    var question = createElement("p", questionText);

    var actions = createElement("div", null, "actions");

    var open = createElement("button", "Archive", "archive");
    open.addEventListener("click", (e) => {
        handleClickArchive(e);
    })

    var archive = createElement("button", "Open", "open");
    archive.addEventListener("click", (e) => {
        handleClickOpen(e);
    });

    actions.appendChild(archive);
    actions.appendChild(open);
    newElement.appendChild(img);
    newElement.appendChild(username);
    newElement.appendChild(question);
    newElement.appendChild(actions);

    return newElement;
}

function createElement(elementType, innerText, className) {
    var newElement = document.createElement(elementType);
    if (innerText) {
        newElement.innerText = innerText;
    }
    if (className) {
        newElement.classList.add(className);
    }

    return newElement;
}

function handleClickOpen(event) {
    if (event.target.classList.contains("open")) {
        event.preventDefault();
        const removedPendingQuestion = getItem(event.target);
        removeItem(event.target);
        openQs.appendChild(removedPendingQuestion);
    }
}

function handleClickArchive(event) {
    if (event.target.classList.contains("archive")) {
        event.preventDefault();
        removeItem(event.target);
    }
}

function removeItem(button) {
    var item = getItem(button);

    if (item) {
        item.parentNode.removeChild(item);
    }
}

function getItem(button) {
    var element = button.parentNode,
        item = null;

    while (element) {
        if (element.className === "pendingQuestion") {
            item = element;
            break;
        }

        element = element.parentNode;
    }

    return item;
}
// To check out your solution, just submit mySolution() function in judge system.