let flashActive = false;
const flashTypes = [ "error", "success", "warn" ];

const flash = ({ type, msg }) => {
  let flashContainer;
  if(tmp = document.querySelector("div#flash"))
    flashContainer = tmp;
  else {
    flashContainer = document.createElement("div");
    flashContainer.id = "flash";
    document.body.insertAdjacentElement("afterbegin", flashContainer);
  }

  flashContainer.innerHTML = msg;
  if(flashTypes.includes(type)) {
    flashContainer.className = "";
    flashContainer.classList.add(type);
  }
  if(flashActive)
    return false;

  flashActive = true;
  flashContainer.animate(
    [ { bottom: "-28px" }, { bottom: 0 } ], {
      duration: 500,
      fill: "both"
    }
  ).onfinish = () => setTimeout(() => {
    flashContainer.animate(
      [ { bottom: 0 }, { bottom: "-28px" } ], {
        duration: 500,
        fill: "both"
      }
    ).onfinish = () => flashActive = false;
  }, 4 * 1e3);
  return true;
};

(async () => {
  if(_addtag = document.querySelector("a#a_addtag")) {
    const postid = +document.querySelector("a.id-link").innerText;
    const poster = document.querySelector("a#a_username").innerText;
    let tags = [...document.querySelectorAll("#tags > .badge")].map(t => t.innerText.slice(0, -2));

    const deleteEvent = async e => {
      e.preventDefault();
      if(!confirm("Do you really want to delete this tag?"))
        return;
      const tag = e.target.parentElement.innerText.slice(0, -2);
      if(!tags.includes(tag))
        return alert("wtf");
      const res = await deleteTag(postid, tag);
      if(!res.success)
        return alert("uff");
      tags = res.tags.map(t => t.tag);
      renderTags(res.tags);
    };
  
    const post = async (url, data) => fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    });
  
    const getTags = async postid => await (await fetch("/api/v2/admin/tags/get/" + postid)).json();

    const deletePost = async postid => await (await fetch("/api/v2/admin/deletepost/" + postid)).json();
  
    const addTag = async (postid, tag) => await (await post("/api/v2/admin/tags/add", {
      postid: postid,
      tag: tag
    })).json();
  
    const deleteTag = async (postid, tag) => await (await post("/api/v2/admin/tags/delete", {
      postid: postid,
      tag: tag
    })).json();
  
    const renderTags = _tags => {
      [...document.querySelectorAll("#tags > .badge")].forEach(tag => tag.parentElement.removeChild(tag));
      _tags.reverse().forEach(tag => {
        const a = document.createElement("a");
        a.href = `/tag/${tag.tag}`;
        a.target = "_blank";
        a.style = "color: inherit !important";
        a.innerText = tag.tag;

        const span = document.createElement("span");
        span.classList.add("badge", "badge-light", "mr-2");
        span.title = tag.user;
        if(tag.tag == "sfw") {
          span.classList.remove("badge-light");
          span.classList.add("badge-success");
        }
        if(tag.tag == "nsfw") {
          span.classList.remove("badge-light");
          span.classList.add("badge-danger");
        }
        if(tag.tag.startsWith(">")) {
          span.classList.add("badge-greentext");
        }

        const delbutton = document.createElement("a");
        delbutton.innerHTML = " ×";
        delbutton.href = "#";
        delbutton.addEventListener("click", deleteEvent);
        span.insertAdjacentElement("beforeend", a);
        span.insertAdjacentElement("beforeend", delbutton);
  
        document.querySelector("#tags").insertAdjacentElement("afterbegin", span);
      });
    };

    const addtagClick = (ae = false) => {
      if(ae)
        ae.preventDefault();

      const insert = document.querySelector("a#a_addtag");
      const span = document.createElement("span");
      span.classList.add("badge", "badge-light", "mr-2");

      const input = document.createElement("input");
      input.size = "10";
      input.value = "";

      let tt;
      input.addEventListener("keydown", async e => {
        if(e.key === "Enter") {
          const tmptag = input.value;
          if(tags.includes(tmptag))
            return alert("tag already exists");
          const res = await addTag(postid, tmptag);
          if(!res.success) {
            return flash({
              type: "error",
              msg: res.msg
            });
          }
          tags = res.tags.map(t => t.tag);
          renderTags(res.tags);
          addtagClick();
        }
        else if(e.key === "Escape") {
          span.parentElement.removeChild(span);
        }
        return true;
      });

      span.insertAdjacentElement("afterbegin", input);
      insert.insertAdjacentElement("beforebegin", span);

      input.focus();

      input.addEventListener("focusout", ie => {
        if(input.value.length === 0)
          input.parentElement.parentElement.removeChild(input.parentElement);
      });
    };

    const toggleEvent = async (e = false) => {
      if(e)
        e.preventDefault();
      let res;
      if(tags.includes("sfw")) {
        await deleteTag(postid, "sfw");
        res = await addTag(postid, "nsfw");
      }
      else if(tags.includes("nsfw")) {
        await deleteTag(postid, "nsfw");
        res = await addTag(postid, "sfw");
      }
      else
        res = await addTag(postid, "sfw");
      
      if(!res.success)
        return flash({
          type: "error",
          msg: res.msg
        });

      renderTags(res.tags);
      tags = res.tags.map(t => t.tag);

      flash({
        type: "success",
        msg: tags.join()
      });
    };

    const deleteButtonEvent = async e => {
      if(e)
        e.preventDefault();
      if(!confirm(`Reason for deleting f0ckpost ${postid} by ${poster} (Weihnachten™)`))
        return;
      const res = await deletePost(postid);
      if(res.success) {
        flash({
          type: "success",
          msg: "post was successfully deleted"
        });
      }
      else {
        flash({
          type: "error",
          msg: res.msg
        });
      }
    };

    _addtag.addEventListener("click", addtagClick);
    document.querySelector("a#a_toggle").addEventListener("click", toggleEvent);
    [...document.querySelectorAll("#tags > .badge > a:last-child")].map(t => t.addEventListener("click", deleteEvent));
    document.querySelector("a#a_delete").addEventListener("click", deleteButtonEvent);

    document.addEventListener("keyup", e => {
      if(e.target.tagName === "INPUT")
        return;
      if(e.key === "p")
        toggleEvent();
      else if(e.key === "i")
        addtagClick();
      else if(e.key === "x")
        deleteButtonEvent();
    });
  }
})();