import { Alpine } from "./alpine";
import { applyTheme } from "./theme";

function initLoginTheme(): void {
  // Progressive enhancement: check localStorage immediately
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme && savedTheme !== "tokyo-night") {
    applyTheme(savedTheme);
  }
}

function changeTheme(): void {
  const select = document.getElementById("theme-select") as HTMLSelectElement;
  if (!select) return;

  const newTheme = select.value;
  applyTheme(newTheme);

  // Save to localStorage
  localStorage.setItem("theme", newTheme);
}

export { changeTheme, initLoginTheme };

Alpine.data("login", () => ({
  changeTheme,
  initLoginTheme,
}));
