var accScale;
var accWidth;
var accBase;

function createAccessibilityNodes() {
  document.querySelector("#accessibility").innerHTML = `<fieldset>
  <legend>Accessibility controls</legend>
  <label for="acc-scale">
    <input
      id="acc-scale"
      type="number"
      style="width: 8ch"
      min="8"
      max="48"
      value="16"
    />
    UI scale</label><br />
    <label for="acc-width">
      <input
        id="acc-width"
        type="number"
        style="width: 8ch"
        min="30"
        max="100"
        value="40"
      />
      Page width</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");
  accWidth = document.getElementById("acc-width");
  accBase = document.getElementById("acc-base");

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

  accWidth.addEventListener("change", function (e) {
    window.localStorage.setItem("acc-width", e.target.value);
    changeWidth(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();

  let scale = window.localStorage.getItem("acc-scale");
  if (scale == null) {
    window.localStorage.setItem("acc-scale", 16);
    scale = window.localStorage.getItem("acc-scale");
  }
  let width = window.localStorage.getItem("acc-width");
  if (width == null) {
    window.localStorage.setItem("acc-width", 40);
    width = window.localStorage.getItem("acc-width");
  }
  let base = window.localStorage.getItem("acc-base");
  if (base == null) {
    window.localStorage.setItem("acc-base", false);
    base = window.localStorage.getItem("acc-base");
  }
  changeScale(scale);
  changeWidth(width);

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

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

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

function changeWidth(width) {
  document.documentElement.style.setProperty("--document-width", width + "em");
}

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