import {visualiseComments} from "./submitComment.js"
function createTopic(){

let topicNameInput=document.getElementById("topicName");
let usernameInput=document.getElementById("username");
let postTextArea=document.getElementById("postText");


let cancelBtn=Array.from(document.getElementsByClassName("cancel"))[0];
let postBtn=Array.from(document.getElementsByClassName("public"))[0];

let main=document.querySelector("main");


cancelBtn.addEventListener("click", function(e){
e.preventDefault();
topicNameInput.value="";
usernameInput.value="";
postTextArea.value="";
})

postBtn.addEventListener("click", function(e){

e.preventDefault();
publishPost();
}
)

function publishPost(){
let topic=topicNameInput.value;
let topicContent=postTextArea.value;
let author=usernameInput.value;

let newTopic={topic,topicContent,author}

let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

let raw = JSON.stringify(newTopic);

let requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};

fetch("http://localhost:3030/jsonstore/collections/myboard/posts", requestOptions)
.then(response => response.json())
.then(result => visualiseNewTopic(result))
.catch(error => console.log('error', error));
}

function visualiseNewTopic(data){
let values=Object.values(data);
console.log(values);

let topicContainer=document.createElement("div");
topicContainer.className="topic-container";
topicContainer.id=values[3];
topicContainer.innerHTML=`<div class="topic-container">
<div class="topic-name-wrapper">
<div class="topic-name">
<a href="#" class="normal">
<h2>${values[0]}</h2>
</a>
<div class="columns">
<div>
<p>Date: <time>${new Date().toLocaleDateString()}</time></p>
<div class="nick-name">
<p>Username: <span>${values[2]}</span></p>
</div>
</div>
<div class="subscribers">
<!-- <button class="subscribe">Subscribe</button> -->
<p>Subscribers: <span>456</span></p>
</div>
</div>
</div>
</div>
</div>`
let hLink=topicContainer.querySelector("h2")
hLink.addEventListener("click", ()=>(visualiseComments(topicContainer.id,topicContainer)))
main.appendChild(topicContainer)



}
}

createTopic();