// Constants
const themes = { system: "system", dark: "dark", light: "light" };
const themeMediaQuery = matchMedia("(prefers-color-scheme: dark)");

// Helpers
const getThemePreference = () => localStorage.getItem("themePreference");

// State
const themeSettings = {
  system: themeMediaQuery.matches ? themes.dark : themes.light,
  preference: getThemePreference() || themes.system
};

function calculateTheme(settings) {
  if (settings.preference == themes.system) {
    return settings.system;
  } else if (settings.preference == themes.dark) {
    return themes.dark;
  } else return themes.light;
}
function applyTheme(theme) {
  if (theme === themes.dark) {
    document.documentElement.classList.add("theme--dark");
  } else {
    document.documentElement.classList.remove("theme--dark");
  }
}

function recalculateAndApplyTheme() {
  applyTheme(calculateTheme(themeSettings));
}

function initializeThemes() {
  recalculateAndApplyTheme();
  themeMediaQuery.addEventListener("change", (e) => {
    themeSettings.system = e.matches ? themes.dark : themes.light;
    recalculateAndApplyTheme();
  });
}

// Should run this in document.head() to avoid flashes of incorrect theme.
initializeThemes();

///////////////////////////////////////////////
/// BELOW THIS LINE CAN BE AFTER BODY/LOAD. ///
///////////////////////////////////////////////

// DOM HELPERS ----------
const qs = (s) => document.querySelector(s);

// USER PREFERENCE UPDATING -------
const setThemePreference = (pref) => {
  if (!themes.hasOwnProperty(pref)) {
    console.error("Invalid theme", pref, "not found in", themes.keys());
  } else {
    themeSettings.preference = pref;
    localStorage.setItem("themePreference", pref);
    recalculateAndApplyTheme();
  }
};

// HOOKING UP THE BUTTONS ----------
var showCurrentPreference = () => {
  const curPref = getThemePreference();
  qs("#theme_preference").innerText = curPref || "Never Set";
  const oldBtn = qs(".current");
  if (oldBtn) {
    oldBtn.classList.remove("current");
    oldBtn.disabled = false;
  }
  if (themes[curPref]) {
    const newBtn = qs(`#${curPref}`);
    newBtn.classList.add("current");
    newBtn.disabled = true;
  }
};

qs("#light").addEventListener("click", (e) => {
  setThemePreference(themes.light);
  showCurrentPreference();
});

qs("#system").addEventListener("click", (e) => {
  setThemePreference(themes.system);
  showCurrentPreference();
});

qs("#dark").addEventListener("click", (e) => {
  setThemePreference(themes.dark);
  showCurrentPreference();
});
// End button hook-ups

// Show current:
showCurrentPreference();

// TODO: Listen to event for theme preference changes to update the buttons.