// Header functionality

import { Alpine } from "./alpine";
import { initializeSearch } from "./search";
import {
  initializeTheme,
  changeTheme,
  changeWoodPaneling,
  loadWoodPaneling,
  updateWoodPanelingIndicators,
} from "./theme";
import { getSelectedLibrary } from "./storage";

const logout = (): void => {
  localStorage.removeItem("token");
  localStorage.removeItem("user");
  window.location.href = "/";
};

// Looks for saved library in localStorage and selects it in current page's dropdown
const restoreLibrarySelection = (): void => {
  const savedLibrary = getSelectedLibrary();
  if (!savedLibrary) return;

  // Common library dropdown IDs across pages
  const dropdownSelectors = [
    "#library-select", // dashboard, bookshelf
    "#selected-library", // alternate naming
    "#library_id", // form field
  ];

  for (const selector of dropdownSelectors) {
    const dropdown = document.querySelector(selector) as HTMLSelectElement;
    if (dropdown) {
      const option = dropdown.querySelector(`option[value="${savedLibrary}"]`);
      if (option) {
        dropdown.value = savedLibrary;
        // Trigger any htmx/change handlers
        dropdown.dispatchEvent(new Event("change", { bubbles: true }));
        console.log("Restored library selection:", savedLibrary);
        return;
      }
    }
  }
};

export { logout, restoreLibrarySelection };

Alpine.data("header", () => ({
  logout,
  initializeSearch,
  initializeTheme,
  changeTheme,
  changeWoodPaneling,
  loadWoodPaneling,
  updateWoodPanelingIndicators,
  restoreLibrarySelection,
}));