const root = document.querySelector(':root');
const themeToggle = document.getElementById('theme-toggle');
let mouseX = 0;
let mouseY = 0;

const darkMode = {
  mainBg: "linear-gradient(#28164B, 70%, #825ECA )",
  contentBg: "#1A181B",
  primaryText: "#DCCBFF",
  secondaryText: "#B89AF5",
  header: "#825ECA",
  navLink: "#B89AF5",
  primaryLink: "#B89AF5",
  primaryLinkHover: "#E3D5FF",
  secondaryLink: "#E3D5FF",
  secondaryLinkHover: "#B89AF5",
  ternaryLink: "var(--blue)",
  ternaryLinkHover: "var(--brown)",
  shadow: "#00000088"
}

const lightMode = {
  mainBg: "linear-gradient(#0045df, #00d4ff)",
  contentBg: "#EEE5E5",
  primaryText: "#342F23",
  secondaryText: "#2F3E5E",
  header: "#DE9B00",
  navLink: "#DE9B00",
  primaryLink: "#896D2E",
  primaryLinkHover: "#284D9E",
  secondaryLink: "#284D9E",
  secondaryLinkHover: "#896D2E",
  ternaryLink: "#284D9E",
  ternaryLinkHover: "#896D2E",
  shadow: "#2F3E5E55"
}

const applyTheme = (theme) => {
  root.style.setProperty("--main-bg", theme.mainBg);
  root.style.setProperty("--content-bg", theme.contentBg);
  root.style.setProperty("--primary-text", theme.primaryText);
  root.style.setProperty("--secondary-text", theme.secondaryText);
  root.style.setProperty("--header", theme.header);
  root.style.setProperty("--nav-link", theme.navLink);
  root.style.setProperty("--primary-link", theme.primaryLink);
  root.style.setProperty("--primary-link-hover", theme.primaryLinkHover);
  root.style.setProperty("--secondary-link", theme.secondaryLink);
  root.style.setProperty("--secondary-link-hover", theme.secondaryLinkHover);
  root.style.setProperty("--ternary-link", theme.ternaryLink);
  root.style.setProperty("--ternary-link-hover", theme.ternaryLinkHover);
  root.style.setProperty("--shadow", theme.shadow);
}

const enableDarkMode = () => {
  applyTheme(darkMode);
  localStorage.setItem('theme', 'dark');
  themeToggle.innerText = 'Light Mode';
}

const disableDarkMode = () => {
  applyTheme(lightMode);
  localStorage.setItem('theme', 'light');
  themeToggle.innerText = 'Dark Mode';
}

const detectTheme = () => {
  let theme = 'light';
  let themeObj = lightMode;

  if (localStorage.getItem('theme')) {
    theme = localStorage.getItem('theme');
  }
  else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    theme = 'dark';
  }

  theme === 'dark' ? enableDarkMode() : disableDarkMode();
}

document.addEventListener("mousemove", (evt) => {
  mouseX = evt.clientX / innerWidth;
  mouseY = evt.clientY / innerHeight;

  root.style.setProperty("--mouse-x", `${mouseX}`);
  root.style.setProperty("--mouse-y", `${mouseY}`);
});

themeToggle.className = "";
detectTheme();

themeToggle.addEventListener('click', () => {
  localStorage.getItem('theme') === 'light' ? enableDarkMode() : disableDarkMode();
});