import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { createContext, useContext, useState, useCallback, } from "react";
import { ThemeProvider, useTheme } from "./ThemeContext";
import { AppLayout } from "../components/layout/AppLayout";
import { SnackbarProvider } from "./SnackbarContext";
import { SnackbarContainer } from "../components/utils/SnackbarContainer";
const AppLayoutContext = createContext(undefined);
// Internal component that uses ThemeContext and provides AppLayoutContext
const AppLayoutProviderInner = ({ children, initialNavbar, initialLeftDrawer, initialClassName }) => {
    // Get theme context
    const themeContext = useTheme();
    // Layout state - ensure default height is set
    const [navbar, setNavbar] = useState(() => {
        const defaultNavbar = { fullWidthNavbar: true, height: "64px" };
        if (initialNavbar) {
            return { ...defaultNavbar, ...initialNavbar };
        }
        return defaultNavbar;
    });
    const [leftDrawer, setLeftDrawer] = useState(initialLeftDrawer || {});
    const [className, setClassName] = useState(initialClassName || "");
    // Memoize setters to avoid unnecessary re-renders
    const handleSetNavbar = useCallback((newNavbar) => {
        setNavbar(newNavbar);
    }, []);
    const handleSetLeftDrawer = useCallback((newLeftDrawer) => {
        setLeftDrawer(newLeftDrawer);
    }, []);
    const handleSetClassName = useCallback((newClassName) => {
        setClassName(newClassName);
    }, []);
    // Setters para actualizar solo los nodos del navbar
    const handleSetNavBarLeftNode = useCallback((node) => {
        setNavbar((prev) => {
            if (!prev) {
                // Si no hay navbar previo, crear uno nuevo con valores por defecto
                return {
                    fullWidthNavbar: true,
                    height: "64px",
                    navBarLeftNode: node,
                };
            }
            return {
                ...prev,
                navBarLeftNode: node,
            };
        });
    }, []);
    const handleSetNavbarRightNode = useCallback((node) => {
        setNavbar((prev) => {
            if (!prev) {
                // Si no hay navbar previo, crear uno nuevo con valores por defecto
                return {
                    fullWidthNavbar: true,
                    height: "64px",
                    navBarRightNode: node,
                };
            }
            return {
                ...prev,
                navBarRightNode: node,
            };
        });
    }, []);
    const value = {
        // Theme context values
        ...themeContext,
        // Layout state
        navbar,
        leftDrawer,
        className,
        // Layout setters
        setNavbar: handleSetNavbar,
        setLeftDrawer: handleSetLeftDrawer,
        setClassName: handleSetClassName,
        setNavBarLeftNode: handleSetNavBarLeftNode,
        setNavbarRightNode: handleSetNavbarRightNode,
    };
    return (_jsx(AppLayoutContext.Provider, { value: value, children: _jsx(AppLayout, { navbar: navbar, leftDrawer: leftDrawer, className: className, children: children }) }));
};
export const AppLayoutProvider = ({ children, initialTheme = "light", storageKey = "flysoft-theme", forceInitialTheme = false, initialNavbar, initialLeftDrawer, className = "", }) => {
    return (_jsx(ThemeProvider, { initialTheme: initialTheme, storageKey: storageKey, forceInitialTheme: forceInitialTheme, children: _jsxs(SnackbarProvider, { children: [_jsx(AppLayoutProviderInner, { initialNavbar: initialNavbar, initialLeftDrawer: initialLeftDrawer, initialClassName: className, children: children }), _jsx(SnackbarContainer, { position: "bottom-right" })] }) }));
};
// Hook to use AppLayout context
// eslint-disable-next-line react-refresh/only-export-components
export const useAppLayout = () => {
    const context = useContext(AppLayoutContext);
    if (context === undefined) {
        throw new Error("useAppLayout must be used within an AppLayoutProvider");
    }
    return context;
};
// Hook to check if AppLayout context is available
// eslint-disable-next-line react-refresh/only-export-components
export const useAppLayoutContext = () => {
    const context = useContext(AppLayoutContext);
    return context !== undefined;
};
