let offset;
let timelineElement = document.getElementById("messages");
let moreButton = document.getElementById("more-button");

function escapeHTML(content) {
  return content.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
}

function getMessageHTML(messageJSON, canRespond) {
  let el = document.createElement("div");
  el.classList.add("message-container");
  el.dataset.messageId = messageJSON.id;
  el.innerHTML = `
  <p>Messaging <a href="/u/${messageJSON.to}/">${messageJSON.to}</a>: <small data-timestamp-here>${messageJSON.response ? timeSince(messageJSON.response_timestamp) : ""}</small></p>
  <blockquote class="message">
    <div><${messageJSON.from ? "a" : "b"} href="/u/${messageJSON.from}/">${messageJSON.from || "Anony&shy;mous"}</${messageJSON.from ? "a" : "b"}> writes: <small>${timeSince(messageJSON.timestamp)}</small></div>
    <a class="fake-link" href="/msg/${messageJSON.id}/"><pre class="not-code">${escapeHTML(messageJSON.content)}</pre></a>
  </blockquote>
  ${messageJSON.response ? `<a class="fake-link" href="/msg/${messageJSON.id}/"><pre class="not-code no-margin">${escapeHTML(messageJSON.response)}</pre></a>` : ""}
  ${
    canRespond ? `
      <div class="msg-error"></div>
      ${messageJSON.response ? "" : '<div><textarea placeholder="Your response..." maxlength="10000"></textarea></div>'}
      <div class="center">
        ${messageJSON.response ? "" : `<button class="reply-button" onclick="replyTo(${messageJSON.id})">Reply</button>`}
        <button onclick="deleteMessage(${messageJSON.id})">Delete</button>
      </div>
    ` : (messageJSON.response ? "" : `<i>No response</i>`)
  }`;

  return el
}

function replyTo(messageID) {
  let msgContainer = document.querySelector(`.message-container[data-message-id="${messageID}"]`);
  let self = msgContainer.querySelector(".reply-button")
  let err = msgContainer.querySelector(`.msg-error`);

  self.setAttribute("disabled", "");

  fetch("/api/messages/", {
    method: "POST",
    body: JSON.stringify({
      id: messageID,
      content: msgContainer.querySelector("textarea").value
    })
  })
    .then((response) => (response.json()))
    .then((json) => {
      if (json.success) {
        let response = document.createElement("pre");
        response.classList.add("not-code");
        response.classList.add("no-margin");
        response.innerText = json.content;

        msgContainer.querySelector("[data-timestamp-here]").innerHTML = timeSince(json.timestamp);

        err.innerHTML = "";

        msgContainer.querySelector("textarea").replaceWith(response);
        self.remove();
      } else {
        err.innerHTML = "Something went wrong!";
        self.removeAttribute("disabled");
      }
    })
    .catch((err) => {
      err.innerHTML = `Something went wrong: ${err}`;
      self.removeAttribute("disabled");
    });
}

function deleteMessage(messageID) {
  let msgContainer = document.querySelector(`.message-container[data-message-id="${messageID}"]`);
  let err = msgContainer.querySelector(`.msg-error`);

  fetch("/api/messages/", {
    method: "DELETE",
    body: JSON.stringify({
      id: messageID
    })
  })
    .then((response) => (response.json()))
    .then((json) => {
      if (json.success) {
        msgContainer.remove();
      } else {
        err.innerHTML = "Something went wrong!";
      }
    })
    .catch((err) => {
      err.innerHTML = `Something went wrong: ${err}`;
    });
}

function _updateURL_replaceElement(element, to) {
  let newElement = document.createElement(to);
  newElement.dataset.url = element.dataset.url;
  newElement.dataset.id = element.dataset.id;
  newElement.innerHTML = element.innerHTML;
  newElement.setAttribute("href", element.getAttribute("href"));

  if (to == "a") {
    newElement.classList.add("not-bold");
  }

  element.replaceWith(newElement);
}

function updateURL(switchID) {
  let switchElement = document.getElementById("switch").querySelector(`[data-id="${switchID}"]`);

  for (const el of document.getElementById("switch").querySelectorAll("b")) {
    _updateURL_replaceElement(el, "a");
  }

  _updateURL_replaceElement(switchElement, "b");
  url = switchElement.dataset.url;
  fetchMessages(true);
}

function fetchMessages(fetchFromStart=false) {
  document.getElementById("refresh").setAttribute("disabled", "");
  let err, append;

  if (fetchFromStart) {
    timelineElement.innerHTML = "<i class='delete-if-more-messages'>Loading...</i>"
    moreButton.hidden = true;
  } else {
    err = document.querySelector(".delete-if-more-messages");
    append = !!err;
    err = err || document.createElement("i");
    err.classList.add("delete-if-more-messages")
  }

  fetch(url + (fetchFromStart === true ? "" : `${url.includes("?") ? "&" : "?"}offset=${offset}`))
    .then((response) => (response.json()))
    .then((json) => {
      if (json.success) {
        let frag = document.createDocumentFragment();

        console.log(fetchFromStart);
        if (fetchFromStart && json.messages.length == 0) {
          let el = document.createElement("i");
          el.innerText = "No messages";
          frag.append(el)
        } else {
          for (const message of json.messages) {
            frag.append(getMessageHTML(message, json.canRespond));
            offset = message.id;
          }
        }

        moreButton.hidden = !json.more;
        timelineElement.append(frag);

        for (el of document.getElementsByClassName("delete-if-more-messages")) {
          el.remove();
        }
      } else {
        err = document.querySelector(".delete-if-more-messages");
        append = !!err;
        err = err || document.createElement("i");
        err.classList.add("delete-if-more-messages")
        err.innerText = "Something went wrong!";
        append && timelineElement.append(err);
      }
      document.getElementById("refresh").removeAttribute("disabled");
    })
    .catch((error) => {
      err = document.querySelector(".delete-if-more-messages");
      append = !!err;
      err = err || document.createElement("i");
      err.classList.add("delete-if-more-messages")
      err.innerText = `Couldn't fetch timeline: ${error}`;
      append && timelineElement.append(err);
      document.getElementById("refresh").removeAttribute("disabled");
    });
}

fetchMessages(true);