const bar = document.querySelector("#actionBar");
const actionSpace = bar.querySelector("#actionSpace");
const actionPost = bar.querySelector("#actionPost");

actionSpace.addEventListener("click", () => {
  document.querySelector("#primaryActions").style.display = "none";
  document.querySelector("#spaceActions").style.display = "flex";

  document.querySelector("#spaceBack").addEventListener("click", () => {
    document.querySelector("#primaryActions").style.display = "flex";
    document.querySelector("#spaceActions").style.display = "none";
  });

  let home = document.querySelector("#spaceHome");
  home.addEventListener("click", () => {
    applyTransition(home.getAttribute("href"));
  });

  document.querySelector("#spaceNew").addEventListener("click", () => {
    fetch("director.php", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: "ajaxId=newSpaceHTML",
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        openModal(data["html"]);
        document.querySelector("#redirect").value = window.location.href;
      });
  });
});

actionPost.addEventListener("click", () => {
  document.querySelector("#primaryActions").style.display = "none";
  document.querySelector("#postActions").style.display = "flex";

  document.querySelector("#postBack").addEventListener("click", () => {
    document.querySelector("#primaryActions").style.display = "flex";
    document.querySelector("#postActions").style.display = "none";
  });

  document.querySelector("#postNew").addEventListener("click", (e) => {
    fetch("director.php", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: "ajaxId=newPostHTML",
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data["html"]);
        openModal(data["html"]);

        document.querySelector("#redirect").value = window.location.href;

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

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