let offset;
let timelineElement = document.getElementById("messages");

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

function getMessageHTML(messageJSON, canRespond) {
  return `<div class="message-container" data-message-id="${messageJSON.id}">
    <blockquote class="message">
      <div><b>${messageJSON.from || "Anonymous"}</b> writes:</div>
      <pre class="not-code">${escapeHTML(messageJSON.content)}</pre>
    </blockquote>
    ${messageJSON.response ? `<pre class="not-code">${escapeHTML(messageJSON.response)}</pre>` : (
      canRespond ? `
        <div><textarea placeholder="Your response..." maxlength="10000"></textarea></div>
        <div><button onclick="replyTo(${messageJSON.id})">Reply</button></div>
      ` : `<i>No response</i>`
    )}
  </div>`;
}

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", "");
  timelineElement.innerHTML = "<i>Loading...</i>"

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

        if (json.messages.length == 0) {
          out = "<i>No messages</i>";
        } else {
          for (const message of json.messages) {
            out += getMessageHTML(message, json.canRespond);
            offset = message.id;
          }
        }

        timelineElement.innerHTML = out;
      } else {
        timelineElement.innerText = "Something went wrong!";
      }
    })
    .catch((err) => {
      timelineElement.innerText = `Couldn't fetch timeline: ${err}`;
      document.getElementById("refresh").removeAttribute("disabled");
    });
}

fetchMessages(true);
document.getElementById("refresh").addEventListener("click", (() => { fetchMessages(true); }));