let text = document.querySelector("#plain-editor textarea").value;
let format = document.getElementById("format").value;

const modes = {
  markdown: "ace/mode/markdown",
  html: "ace/mode/html",
  plain: "ace/mode/text",
  mono: "ace/mode/text"
}

function updatePreview(raw) {
  document.getElementById("preview").innerHTML = toHTML(format, raw);
  document.getElementById("character-count").innerText = (new Intl.NumberFormat).format(raw.length);

  if (raw.length > 500_000) {
    document.getElementById("character-count").classList.add("error");
    document.getElementById("character-count").classList.remove("warning");
  } else if (raw.length >= 498_000) {
    document.getElementById("character-count").classList.remove("error");
    document.getElementById("character-count").classList.add("warning");
  } else {
    document.getElementById("character-count").classList.remove("error");
    document.getElementById("character-count").classList.remove("warning");
  }

  text = raw;
}

let editor = createEditor("ace-editor", text, format, (raw) => {
  updatePreview(raw);
  document.querySelector("#plain-editor textarea").value = raw;
});

document.querySelector("#plain-editor textarea").addEventListener("input", function() {
  updatePreview(this.value);
});

document.getElementById("use-plain-editor").addEventListener("input", function() {
  if (this.checked) {
    document.getElementById("editor-area").dataset.editor = "plain";
  } else {
    document.getElementById("editor-area").dataset.editor = "ace";
    editor.setValue(text);
  }
});

document.getElementById("format").addEventListener("change", function() {
  format = this.value;
  editor.getSession().setMode(modes[format]);
  updatePreview(text);
});

updatePreview(text);

window.onbeforeunload = (event) => {
  return "Your changes won't be saved.";
}