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