var accScale;
var accBase;

function createAccessibilityNodes() {
  document.querySelector("#accessibility").innerHTML = `<fieldset>
  <legend>Accessibility controls</legend>
  <label for="size_width">
    <input
      id="acc-scale"
      type="number"
      style="width: 8ch"
      min="8"
      max="48"
      value="16"
    />
    UI scale</label><br />
  <label for="acc-base" class="checkbox">
    <input id="acc-base" type="checkbox" id="acc-base" />
    <span class="checkbox">◉</span>
    Base style (requires reload)
  </label>
</fieldset>`;
  document.querySelector("#accessibility").hidden = false;

  accScale = document.getElementById("acc-scale");
  accBase = document.getElementById("acc-base");

  accScale.addEventListener("change", function (e) {
    window.localStorage.setItem("acc-scale", e.target.value);
    changeScale(e.target.value);
  });

  accBase.addEventListener("change", function (e) {
    window.localStorage.setItem("acc-base", e.target.checked);
    window.location.reload();
  });
}

window.addEventListener("load", (e) => initializeChanges(e, true));

// on localStorage change
window.addEventListener("storage", initializeChanges);

let prevBase; // previous base, for reload check

function initializeChanges(_, loading) {
  if (window.frameElement == null) createAccessibilityNodes();

  const scale = window.localStorage.getItem("acc-scale");
  const base = window.localStorage.getItem("acc-base");
  changeScale(scale);

  if (loading) {
    prevBase = base;
    changeBase(base === "true");
  } else if (base != prevBase) window.location.reload();

  if (scale != null && accScale != null) accScale.value = scale;
  if (base != null && accBase != null) accBase.checked = base === "true";
}

function changeScale(scale) {
  document.documentElement.style.setProperty("--base-scale", scale + "px");
}

function changeBase(base) {
  if (base) document.documentElement.classList.add("base");
  else document.documentElement.classList.remove("base");
}