let colours = ["red", "blue", "green", "purple", "orange", "brown"];
let paragraphs = document.getElementsByTagName("p");

function colourParagraphs(){
    for(var i = 0; i < paragraphs.length; i++){
        paragraphs[i].style.color = colours[Math.floor(Math.random() * 6)];
    }
}

function displayTitles(){
    for(var i = 0; i < paragraphs.length; i++){
        paragraphs[i].title = paragraphs[i].innerHTML.length;
    }
}

document.onclick = (event) => {
    let current = event.target;
    let node = current.previousElementSibling;

    if(current.nodeName === "P"){
        for(var i = 0; i < paragraphs.length; i++){
            paragraphs[i].style = null;
            colourParagraphs();
        }

        if([...current.parentElement.children].filter((value) => value.nodeName === "P").indexOf(current) %2){
            current.style.backgroundColor = "darkgray";
        } else{
            current.style.backgroundColor = "lightgray";
        }
        current.style.border = "solid thick green";

        while(node != null){
            if(node.nodeName === "P"){
                node.style.border = "solid thick orange";
                break;
            }
            node = node.previousElementSibling;
        }


        node = current.nextElementSibling;

        while(node != null){
            if(node.nodeName === "P"){
                node.style.border = "solid thick blue";
                break;
            }
            node = node.nextElementSibling;
        }

    }


    if(current.nodeName == "H1"){
        console.log(current.nextElementSibling.hidden)
        current.nextElementSibling.hidden = !current.nextElementSibling.hidden;
    }

};

document.getElementById("form").onsubmit = ((event) =>{
    event.preventDefault();
    let paragraph = event.target.elements["paragraph"].value;
    let paragraphEl = document.createElement("h1");
    let content = event.target.elements["content"].value;
    let contentEl = document.createElement("p");
    paragraphs = document.getElementsByTagName("p");
    paragraphEl.innerHTML = paragraph;
    contentEl.innerHTML = content;
    let lastParagraphParent = paragraphs[paragraphs.length - 1].parentNode;
    lastParagraphParent.insertBefore(paragraphEl, document.getElementById("form"));
    lastParagraphParent.insertBefore(contentEl, document.getElementById("form"));
    colourParagraphs();
});

for(i = 0; i < paragraphs.length; i++){
    let parent = paragraphs[i].parentNode;
    let paragraph = document.createElement("h1");
    paragraph.innerHTML = "Paragraf " + i;
    parent.insertBefore(paragraph, paragraphs[i]);
}

colourParagraphs();
displayTitles();