let actionButton = document.querySelector("#actionButton");
let newPostButton = document.querySelector("#newPost");
let newSpaceButton = document.querySelector("#newSpace");
let filterSortButton = document.querySelector("#filterSort");
let circle = document.querySelector(".circleLayout");
let modal = document.querySelector("#stdModal");

let state = "hide";

actionButton.addEventListener("click", () => {
  if (state == "hide") {
    state = "show";
    newPostButton.style.display = "flex";
    newSpaceButton.style.display = "flex";
    filterSortButton.style.display = "flex";
    circle.style.backgroundColor = "#FFFFFF";

    newPostButton.addEventListener("click", () => {
      fetch("director.php", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: "ajaxId=newPostHTML",
      })
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          modal.innerHTML = data["html"];
          modal.style.display = "flex";

          let newNavThought = document.querySelector("#newNavThought");
          let newThought = document.querySelector("#newThought");
          let newNavMoment = document.querySelector("#newNavMoment");
          let newMoment = document.querySelector("#newMoment");
          let newNavEssay = document.querySelector("#newNavEssay");
          let newEssay = document.querySelector("#newEssay");
          let newPostLabel = document.querySelector("#newPostLabel");
          let postType = document.querySelector("#postType");

          let share = document.querySelector("#share");

          share.addEventListener("click", (e) => {
            e.preventDefault();
            switch (postType.value) {
              case "Thought":
                let thought = document.querySelector("#thought");

                // TODO: Retrieve space dynamically.

                fetch("director.php", {
                  method: "POST",

                  // TODO: Add Authorization header with JWT
                  headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                  },
                  body:
                    "ajaxId=newThought&space=1&thought=" +
                    encodeURIComponent(thought.value),
                }).then((response) => {
                  console.log(response.json());
                  modal.style.display = "none";
                });
                break;
              case "Moment":
                break;
              case "Essay":
                break;
            }
          });

          newNavThought.addEventListener("click", () => {
            newMoment.style.display = "none";
            newEssay.style.display = "none";

            newThought.style.display = "flex";
            newPostLabel.innerText = "New Thought";
            newThought.querySelector('input[type="text"]').focus();
            postType.value = "Thought";
          });

          newNavMoment.addEventListener("click", () => {
            newThought.style.display = "none";
            newEssay.style.display = "none";

            newMoment.style.display = "flex";
            newPostLabel.innerText = "New Moment";
            newMoment.querySelector('input[type="text"]').focus();
            postType.value = "Moment";
          });

          newNavEssay.addEventListener("click", () => {
            newThought.style.display = "none";
            newMoment.style.display = "none";

            newEssay.style.display = "flex";
            newPostLabel.innerText = "New Essay";
            newEssay.querySelector('input[type="text"]').focus();
            postType.value = "Essay";
          });

          return data;
        });
    });

    newSpaceButton.addEventListener("click", () => { });

    filterSortButton.addEventListener("click", () => { });
  } else if (state == "show") {
    state = "hide";
    newPostButton.style.display = "none";
    newSpaceButton.style.display = "none";
    filterSortButton.style.display = "none";
    circle.style.backgroundColor = "transparent";
  }
});