(() => {
  /* DOM */
  const ascii = document.getElementById('pref-ascii');
  const force = document.getElementById('pref-force');
  const themeRadios = document.getElementsByName('pref-theme');
  const bodyClass = document.body.classList;

  /* localStorage management */
  const lsn = "~ddb:"; // localStorage namespace
  const getPref = (pref) => localStorage.getItem(lsn + pref);
  const setPref = (pref, value) => localStorage.setItem(lsn + pref, value);
  const getPrefs = () => ({
    prefASCII: getPref('ascii') === 'true',
    prefForce: getPref('force') === 'true',
    prefTheme: getPref('theme') || 'dark',
  });

  /* Update the state of the document based on client preferences. */
  const renderPreferences = () => {
    const { prefASCII, prefForce, prefTheme } = getPrefs();
    if(prefASCII) {
      bodyClass.add('ascii');
      ascii.checked = "checked";
    }
    if(prefForce) {
      bodyClass.add(prefTheme);
      force.checked = "checked";
    }
    themeRadios.forEach(radio => {
      if(radio.value === prefTheme) {
        radio.checked = true;
      }
    });
  };
  renderPreferences();

  /* ASCII aesthetic intensifies */
  ascii.onchange = (evt) => {
    const { prefASCII } = getPrefs();
    bodyClass.toggle('ascii');
    setPref('ascii', (!prefASCII).toString());
  };

  /* Manage theme forcing behavior */
  const themes = Array.from(themeRadios).map(radio => radio.value);
  force.onchange = () => {
    const { prefForce, prefTheme } = getPrefs();
    const nextForce = !prefForce;
    themes.forEach(theme => bodyClass.remove(theme));
    if (nextForce) {
      bodyClass.add(prefTheme);
    }
    setPref('force', nextForce.toString())
  };

  /* Manage theme selection */
  themeRadios.forEach(radio => radio.onchange = () => {
    const { prefForce } = getPrefs();
    setPref('theme', radio.value);
    if(prefForce) {
      themes.forEach(theme => bodyClass.remove(theme));
      bodyClass.add(radio.value);
    }
  });
})()