const root = document.querySelector(':root');
const themeToggle = document.getElementById('theme-toggle');
const mainNavbar = document.querySelector('#main-navbar ul');
let mouseX = 0;
let mouseY = 0;
let navX = 0;
let navY = 0;
let navW = 0;
let navH = 0;
let navOffsetX = 0;
let navOffsetY = 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: "#B89AF5",
  ternaryLinkHover: "#E3D5FF",
  linkShadow: "#00000088",
  shadow: "#00000088",
  navSpotlight: `radial-gradient(
    circle at center,
    rgba(220, 203, 255, 0.05) 0%,
    rgba(220, 203, 255, 0.03) 25%,
    rgba(220, 203, 255, 0) 40%
  )`
}

const lightMode = {
  // mainBg: "linear-gradient(#0045df, #00d4ff)",
  mainBg: "linear-gradient(#918EF4, #6F9CEB)",
  contentBg: "#98B9F2",
  primaryText: "#141B41",
  secondaryText: "#141B41",
  header: "#141B41",
  navLink: "#141B41",
  primaryLink: "#306BAC",
  primaryLinkHover: "#141B41",
  secondaryLink: "#306BAC",
  secondaryLinkHover: "#141B41",
  ternaryLink: "#141B41",
  ternaryLinkHover: "#306BAC",
  linkShadow: "#00000000",
  shadow: "#132B40AA",
  navSpotlight: `radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0) 40%
  )`
}

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);
  root.style.setProperty("--link-shadow", theme.linkShadow);
  root.style.setProperty("--nav-spotlight", theme.navSpotlight);
  mainNavbar.style.background = theme.navSpotlight;
  mainNavbar.style.transition = 'background-position 0.25s';
}

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

const disableDarkMode = () => {
  applyTheme(lightMode);
  localStorage.setItem('theme', 'light');
  themeToggle.innerText = '🌙 Dark Theme';
  themeToggle.value = '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();
}

mainNavbar.addEventListener("mousemove", (evt) => {
  mainNavbar.style.setProperty('background-position-x', `${mouseX - navX - (navW / 2)}px`);
  mainNavbar.style.setProperty('background-position-y', `${mouseY - navY - (navH / 2)}px`);
});

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

const calcNavOffset = () => {
  const rect = mainNavbar.getBoundingClientRect()
  navX = rect.x;
  navY = rect.y;
  navW = rect.width;
  navH = rect.height;
}

calcNavOffset();

themeToggle.className = "";
detectTheme();

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