"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlTemplate = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var theme_1 = require("./theme");
var useStateRef_1 = require("powerhooks/useStateRef");
var onyxia_ui_1 = require("onyxia-ui");
var ThemeProvider_1 = require("onyxia-ui/lib/ThemeProvider");
var onyxia_ui_2 = require("onyxia-ui");
var useEvt_1 = require("evt/hooks/useEvt");
var evt_1 = require("evt");
var onyxia_ui_3 = require("onyxia-ui");
var GlLinkToTop_1 = require("./utils/GlLinkToTop");
var disableEmotionWarnings_1 = require("./tools/disableEmotionWarnings");
var getScrollableParent_1 = require("powerhooks/getScrollableParent");
var onyxia_ui_4 = require("onyxia-ui");
var memoizee_1 = __importDefault(require("memoizee"));
(0, disableEmotionWarnings_1.disableEmotionWarnings)();
//NOTE: Here we are sure that we are wrapped into a <ThemeProvider />.
//we can use useTheme, useStyles, ect...
var GlTemplateInner = (0, react_1.memo)(function (props) {
    var header = props.header, children = props.children, footer = props.footer, className = props.className, hasTopOfPageLinkButton = props.hasTopOfPageLinkButton, doTakeChargeOfHidingRootSplashScreen = props.doTakeChargeOfHidingRootSplashScreen, applyHeaderPadding = props.applyHeaderPadding;
    var rootRef = (0, useStateRef_1.useStateRef)(null);
    var headerOptions = (function () {
        var _a, _b;
        var headerOptions = props.headerOptions;
        if (headerOptions === undefined) {
            return {
                "position": "top of page",
                "isRetracted": false,
            };
        }
        switch (headerOptions.position) {
            case "top of page":
                return __assign(__assign({}, headerOptions), { "isRetracted": (_a = headerOptions.isRetracted) !== null && _a !== void 0 ? _a : false });
            case "sticky":
                return __assign(__assign({}, headerOptions), { "isRetracted": (_b = headerOptions.isRetracted) !== null && _b !== void 0 ? _b : false });
        }
    })();
    {
        var hideRootSplashScreen_1 = (0, onyxia_ui_1.useSplashScreen)().hideRootSplashScreen;
        (0, react_1.useEffect)(function () {
            if (!doTakeChargeOfHidingRootSplashScreen) {
                return;
            }
            hideRootSplashScreen_1();
        }, []);
    }
    var _a = (0, onyxia_ui_2.useDomRect)(), headerWrapperRef = _a.ref, headerHeight = _a.domRect.height;
    var _b = (0, onyxia_ui_2.useDomRect)(), childrenWrapperRef = _b.ref, childrenWrapperWidth = _b.domRect.width;
    var _c = __read((0, react_1.useState)(true), 2), isSmartHeaderVisible = _c[0], setIsSmartHeaderVisible = _c[1];
    (0, useEvt_1.useEvt)(function (ctx) {
        var element = rootRef.current;
        if (!element) {
            return;
        }
        var previousScrollTop = 0;
        var scrollableParent = (0, getScrollableParent_1.getScrollableParent)({
            element: element,
            "doReturnElementIfScrollable": true,
        });
        evt_1.Evt.from(ctx, scrollableParent, "scroll").attach(function () {
            var scrollTop = scrollableParent.scrollTop;
            setIsSmartHeaderVisible(scrollTop < previousScrollTop
                ? true
                : scrollTop <= headerHeight);
            previousScrollTop = scrollTop;
        });
    }, [rootRef.current, headerHeight, headerOptions.isRetracted]);
    var _d = useStyles({
        childrenWrapperWidth: childrenWrapperWidth,
        headerHeight: headerHeight,
        "isHeaderRetracted": headerOptions.isRetracted === "smart"
            ? !isSmartHeaderVisible
            : headerOptions.isRetracted,
        "headerPosition": headerOptions.position,
        "applyHeaderPadding": applyHeaderPadding !== null && applyHeaderPadding !== void 0 ? applyHeaderPadding : false,
    }, { props: props }), classes = _d.classes, cx = _d.cx;
    return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: rootRef, className: cx(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ ref: headerWrapperRef, className: classes.headerWrapper }, { children: header })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: classes.childrenWrapper, ref: childrenWrapperRef }, { children: [children, hasTopOfPageLinkButton && (0, jsx_runtime_1.jsx)(GlLinkToTop_1.GlLinkToTop, {}), (0, jsx_runtime_1.jsx)("div", __assign({ className: classes.footerWrapper }, { children: footer }))] }))] })));
});
//NOTE: If the theme provider is manually provided, the user is in charge of
//hiding the splash screen.
exports.GlTemplate = (0, react_1.memo)(function (props) {
    var ThemeProvider = useThemeProvider().ThemeProvider;
    var children = ((0, jsx_runtime_1.jsx)(GlTemplateInner, __assign({}, props, { doTakeChargeOfHidingRootSplashScreen: ThemeProvider !== undefined })));
    return ThemeProvider === undefined ? (children) : ((0, jsx_runtime_1.jsx)(ThemeProvider, __assign({ splashScreen: theme_1.splashScreen }, { children: children })));
});
var useThemeProvider = (function () {
    var getThemeProvider = (0, memoizee_1.default)(function (isThemeProvided) {
        if (isThemeProvided) {
            return undefined;
        }
        var ThemeProvider = (0, onyxia_ui_4.createThemeProvider)({}).ThemeProvider;
        return ThemeProvider;
    });
    function useThemeProvider() {
        var isThemeProvided = (0, ThemeProvider_1.useIsThemeProvided)();
        var ThemeProvider = getThemeProvider(isThemeProvided);
        return { ThemeProvider: ThemeProvider };
    }
    return { useThemeProvider: useThemeProvider };
})().useThemeProvider;
var useStyles = (0, theme_1.makeStyles)({ "name": { GlTemplate: exports.GlTemplate } })(function (theme, _a) {
    var headerHeight = _a.headerHeight, childrenWrapperWidth = _a.childrenWrapperWidth, isHeaderRetracted = _a.isHeaderRetracted, headerPosition = _a.headerPosition, applyHeaderPadding = _a.applyHeaderPadding;
    return {
        "root": {},
        "headerWrapper": __assign({ "padding": applyHeaderPadding
                ? theme.spacing({
                    "rightLeft": "".concat(theme.paddingRightLeft, "px"),
                    "topBottom": "".concat(theme.spacing(3), "px"),
                })
                : undefined }, (function () {
            var out = {
                "zIndex": 1,
            };
            if (headerPosition === "sticky") {
                out = __assign(__assign({}, out), { "width": childrenWrapperWidth, "backgroundColor": (0, onyxia_ui_3.changeColorOpacity)({
                        "color": theme.colors.useCases.surfaces.background,
                        "opacity": 0.94,
                    }), "top": !isHeaderRetracted ? 0 : -headerHeight, "transition": "top 350ms" });
            }
            switch (headerPosition) {
                case "sticky":
                    out = __assign(__assign({}, out), { "position": "sticky", "pointerEvents": isHeaderRetracted
                            ? "none"
                            : undefined });
                    break;
                case "top of page":
                    return {};
            }
            return out;
        })()),
        "footerWrapper": {
            "marginTop": "auto",
        },
        "childrenWrapper": {
            "overflowX": "hidden",
            "display": "flex",
            "flexDirection": "column",
            "minHeight": window.innerHeight,
        },
    };
});
//# sourceMappingURL=GlTemplate.js.map