// Header functionality
import { Alpine } from "./alpine";
import { updateThemeIndicators } from "./themeDropdown";
const toggleThemeDropdown = () => {
    const dropdown = document.getElementById("theme-dropdown");
    if (dropdown) {
        dropdown.classList.toggle("hidden");
        // Close user menu if open
        const userMenu = document.getElementById("user-menu");
        if (userMenu && !dropdown.classList.contains("hidden")) {
            userMenu.classList.add("hidden");
        }
    }
};
const toggleUserMenu = () => {
    const menu = document.getElementById("user-menu");
    if (menu) {
        menu.classList.toggle("hidden");
        // Close theme dropdown if open
        const themeDropdown = document.getElementById("theme-dropdown");
        if (themeDropdown && !menu.classList.contains("hidden")) {
            themeDropdown.classList.add("hidden");
        }
    }
};
const changeThemeTo = (theme) => {
    // Apply the theme using the consolidated function from theme.ts
    if (window.applyTheme) {
        window.applyTheme(theme);
    }
    // Save to server if logged in
    const token = localStorage.getItem("token");
    if (token) {
        fetch("/api/auth/theme", {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${token}`,
            },
            body: JSON.stringify({ theme }),
        }).catch((err) => console.log("Theme save failed", err));
    }
    // Close dropdown
    const dropdown = document.getElementById("theme-dropdown");
    if (dropdown) {
        dropdown.classList.add("hidden");
    }
};
const logout = () => {
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    window.location.href = "/";
};
// Close dropdowns when clicking outside
document.addEventListener("click", (e) => {
    const target = e.target;
    const themeDropdown = document.getElementById("theme-dropdown");
    const userMenu = document.getElementById("user-menu");
    const themeButton = target?.closest('button[onclick="toggleThemeDropdown()"]');
    const userButton = target?.closest('button[onclick="toggleUserMenu()"]');
    if (!themeButton &&
        themeDropdown &&
        !themeDropdown.classList.contains("hidden")) {
        if (!themeDropdown.contains(target)) {
            themeDropdown.classList.add("hidden");
        }
    }
    if (!userButton && userMenu && !userMenu.classList.contains("hidden")) {
        if (!userMenu.contains(target)) {
            userMenu.classList.add("hidden");
        }
    }
});
export { toggleThemeDropdown, toggleUserMenu, changeThemeTo, logout };
Alpine.global("header", {
    logout,
    toggleThemeDropdown,
    toggleUserMenu,
    changeThemeTo: (theme) => {
        changeThemeTo(theme);
        updateThemeIndicators(); // Call themeDropdown function
    },
});
//# sourceMappingURL=header.js.map