export function visualiseComments(postId,topicContainer){
getAllComments();


let homeLink=document.querySelector("a");
homeLink.addEventListener("click", function (e){
    e.preventDefault();
    console.log("back to all topics")
})

let main=document.getElementsByTagName("main")[0];
main.appendChild(topicContainer);

let submitForm=document.createElement("div");
submitForm.classname="answer-comment";
submitForm.innerHTML=`<p><span>currentUser</span> comment:</p>
<div class="answer">
    <form>
        <textarea name="postText" id="comment" cols="30" rows="10"></textarea>
        <div>
            <label for="username">Username <span class="red">*</span></label>
            <input type="text" name="username" id="username">
        </div>
        <button>Post</button>
    </form>
</div>`;



main.appendChild(submitForm);
let postButton=submitForm.querySelector("button");
console.log(postButton)
let nameArea=document.getElementById("comment");
let userInput=document.getElementById("username");

postButton.addEventListener("click", function(e){
    e.preventDefault();
    postComment()
})

function postComment(){
    let commentText=nameArea.value;
    let author=userInput.value;
    
    
    let newComment={commentAuthor:author, text:commentText, postId}
    
    
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    
    var raw = JSON.stringify(newComment);
    
    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };
    
    fetch("http://localhost:3030/jsonstore/collections/myboard/comments", requestOptions)
      .then(response => response.json())
      .then(result => getAllComments())
      .catch(error => console.log('error', error));    
}

function getAllComments(){
    var requestOptions = {
        method: 'GET',
        redirect: 'follow'
      };
      
      fetch("http://localhost:3030/jsonstore/collections/myboard/comments", requestOptions)
        .then(response => response.json())
        .then(result => filterComments(result))
        .catch(error => console.log('error', error));
}

function filterComments(data){
let arr=Object.values(data);
let filteredArr=arr.filter(a=>a.postId==postId);
main.innerHTML="";
main.appendChild(topicContainer);


filteredArr.forEach(c => {
    renderComment(c)
});
main.appendChild(submitForm)

}

function renderComment(data){

    let newCommentDiv=document.createElement("div");
    newCommentDiv.className="comment";
    newCommentDiv.innerHTML=`<header class="header">
                    <p><span>${data.commentAuthor}</span> posted on <time>${Date.now()}</time></p>
                </header>
                <div class="comment-main">
                    <div class="userdetails">
                        <img src="./static/profile.png" alt="avatar">
                    </div>
                    <div class="post-content">
                        <p>${data.text}</p>
                    </div>
                </div>
                <div class="footer">
                    <p><span>5</span> likes</p>
                </div>`

nameArea.value="";
userInput.value="";                
main.appendChild(newCommentDiv);

}



}