import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useEffect, Children, useState } from "react";
import { LayoutProvider } from "./layoutContext";
import { cn } from "..";
import { useMediaQuery } from "@orderly.network/hooks";
import { MEDIA_TABLET } from "@orderly.network/types";
const InnerLayout = (props)=>{
    const { mobile, ...rest } = props;
    const [elements, setElements] = useState([]);
    // console.log("Layout", headerHeight, footerHeight);
    const matches = useMediaQuery(MEDIA_TABLET);
    useEffect(()=>{
        const elements = [];
        Children.forEach(props.children, (child)=>{
            // console.log(child);
            const displayName = child?.type?.displayName;
            elements.push(displayName);
        });
        setElements(elements);
    }, []);
    if (matches) {
        return /*#__PURE__*/ _jsx(_Fragment, {
            children: mobile
        });
    }
    return /*#__PURE__*/ _jsx("div", {
        ...rest,
        className: cn("orderly-flex orderly-flex-1", {
            "orderly-flex-col": elements.includes("Header")
        }),
        children: props.children
    });
};
export const Layout = /*#__PURE__*/ memo((props)=>{
    return /*#__PURE__*/ _jsx(LayoutProvider, {
        children: /*#__PURE__*/ _jsx(InnerLayout, {
            ...props
        })
    });
});
Layout.displayName = "Layout";

//# sourceMappingURL=layout.js.map