"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "Layout", {
    enumerable: true,
    get: function() {
        return Layout;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _layoutContext = require("./layoutContext");
const _ = require("..");
const _hooks = require("@orderly.network/hooks");
const _types = require("@orderly.network/types");
const InnerLayout = (props)=>{
    const { mobile, ...rest } = props;
    const [elements, setElements] = (0, _react.useState)([]);
    // console.log("Layout", headerHeight, footerHeight);
    const matches = (0, _hooks.useMediaQuery)(_types.MEDIA_TABLET);
    (0, _react.useEffect)(()=>{
        const elements = [];
        _react.Children.forEach(props.children, (child)=>{
            // console.log(child);
            const displayName = child?.type?.displayName;
            elements.push(displayName);
        });
        setElements(elements);
    }, []);
    if (matches) {
        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
            children: mobile
        });
    }
    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
        ...rest,
        className: (0, _.cn)("orderly-flex orderly-flex-1", {
            "orderly-flex-col": elements.includes("Header")
        }),
        children: props.children
    });
};
const Layout = /*#__PURE__*/ (0, _react.memo)((props)=>{
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_layoutContext.LayoutProvider, {
        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(InnerLayout, {
            ...props
        })
    });
});
Layout.displayName = "Layout";

//# sourceMappingURL=layout.js.map