// Theme dropdown active indicator management

import { Alpine } from "./alpine";
import { changeThemeTo, toggleThemeDropdown as originalToggle } from "./header";
import { updateWoodPanelingIndicators } from "./woodPaneling";

// Update visual indicators for theme buttons
const updateThemeIndicators = (): void => {
  const currentTheme = localStorage.getItem("theme") || "tokyo-night";

  // Update theme buttons (all buttons with changeThemeTo onclick)
  document.querySelectorAll('[onclick^="changeThemeTo"]').forEach((btn) => {
    const onclick = btn.getAttribute("onclick") || "";
    const match = onclick.match(/changeThemeTo\('(.+?)'\)/);
    if (match) {
      const theme = match[1];
      if (theme === currentTheme) {
        // Active state - use CSS class instead of inline style
        btn.classList.add("bg-theme-active");
        btn.classList.remove("bg-theme-inactive");
      } else {
        // Inactive state
        btn.classList.remove("bg-theme-active");
        btn.classList.add("bg-theme-inactive");
      }
    }
  });
};

// Update on dropdown toggle
export function initializeThemeDropdown() {
  // Call original function
  originalToggle();
  // Then update indicators
  updateThemeIndicators();
  updateWoodPanelingIndicators();
}

// Update after theme changes
export function initializeChangeThemeTo(theme: string): void {
  // Call original function from header.ts
  changeThemeTo(theme);
  // Then update indicators
  updateThemeIndicators();
}

// Auto-initialize when DOM is ready
if (typeof document !== "undefined") {
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", updateThemeIndicators);
  } else {
    updateThemeIndicators();
  }
}

Alpine.global("themeDropdown", {
  initializeDropdown: initializeThemeDropdown,
  changeTheme: initializeChangeThemeTo,
  updateIndicators: updateThemeIndicators,
});

export { updateThemeIndicators };