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);

}



}