const root = document.querySelector(':root');
const themeToggle = document.getElementById('theme-toggle');
const mainNavbar = document.querySelector('#main-navbar');
let mouseX = 0;
let mouseY = 0;
let navX = mainNavbar.getBoundingClientRect().x;
let navY = mainNavbar.getBoundingClientRect().y;
let navW = mainNavbar.getBoundingClientRect().width;
let navH = mainNavbar.getBoundingClientRect().height;
root.style.setProperty("--nav-x", `${navX}`);
root.style.setProperty("--nav-y", `${navY}`);

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)",
  mainBg: "linear-gradient(#2B5F8C, #3DADF2)",
  contentBg: "white",
  primaryText: "#132B40",
  secondaryText: "#2B5F8C",
  header: "#CFE8FF",
  navLink: "#CFE8FF",
  primaryLink: "#337AA6",
  primaryLinkHover: "#3DADF2",
  secondaryLink: "#2F4A62",
  secondaryLinkHover: "#2B5F8C",
  ternaryLink: "#2B5F8C",
  ternaryLinkHover: "#3DADF2",
  shadow: "#132B40AA"
}

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", `${evt.clientX}px`);
  root.style.setProperty("--mouse-y", `${evt.clientY}px`);
});

const calcNavOffset = () => {
  let rect = mainNavbar.getBoundingClientRect()
  navX = rect.x;
  navY = rect.y;
  navW = rect.width;
  navH = rect.height;
  root.style.setProperty("--nav-x-offset", `${navX - (navW / 2)}px`);
  root.style.setProperty("--nav-y-offset", `${navY - (navH / 2)}px`);
}

calcNavOffset();

themeToggle.className = "";
detectTheme();

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