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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState, memo } from "react";
import { tss, splashScreen } from "./theme";
import { useStateRef } from "powerhooks/useStateRef";
import { useSplashScreen } from "onyxia-ui/lib/SplashScreen";
import { useIsThemeProvided } from "onyxia-ui/lib/ThemeProvider";
import { useDomRect } from "powerhooks/useDomRect";
import { useEvt } from "evt/hooks/useEvt";
import { Evt } from "evt";
import { changeColorOpacity } from "onyxia-ui/lib/color";
import { GlLinkToTop } from "./utils/GlLinkToTop";
import { disableEmotionWarnings } from "./tools/disableEmotionWarnings";
import { getScrollableParent } from "powerhooks/getScrollableParent";
import { createThemeProvider } from "onyxia-ui/lib/ThemeProvider";
import memoize from "memoizee";
disableEmotionWarnings();
//NOTE: Here we are sure that we are wrapped into a <ThemeProvider />.
//we can use useTheme, useStyles, ect...
var GlTemplateInner = memo(function (props) {
    var header = props.header, body = props.body, footer = props.footer, className = props.className, hasTopOfPageLinkButton = props.hasTopOfPageLinkButton, doTakeChargeOfHidingRootSplashScreen = props.doTakeChargeOfHidingRootSplashScreen, applyHeaderPadding = props.applyHeaderPadding;
    var rootRef = 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 = useSplashScreen().hideRootSplashScreen;
        useEffect(function () {
            if (!doTakeChargeOfHidingRootSplashScreen) {
                return;
            }
            hideRootSplashScreen_1();
        }, []);
    }
    var _a = useDomRect(), headerWrapperRef = _a.ref, headerHeight = _a.domRect.height;
    var _b = useDomRect(), bodyAndFooterWrapperRef = _b.ref, childrenWrapperWidth = _b.domRect.width;
    var _c = __read(useState(true), 2), isSmartHeaderVisible = _c[0], setIsSmartHeaderVisible = _c[1];
    useEvt(function (ctx) {
        var element = rootRef.current;
        if (!element) {
            return;
        }
        var previousScrollTop = 0;
        var scrollableParent = getScrollableParent({
            element: element,
            "doReturnElementIfScrollable": true,
        });
        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,
        "classesOverrides": props.classes,
    }), classes = _d.classes, cx = _d.cx;
    return (_jsxs("div", __assign({ ref: rootRef, className: cx(classes.root, className) }, { children: [_jsx("div", __assign({ ref: headerWrapperRef, className: classes.headerWrapper }, { children: header })), _jsxs("div", __assign({ className: classes.bodyAndFooterWrapper, ref: bodyAndFooterWrapperRef }, { children: [body, hasTopOfPageLinkButton && _jsx(GlLinkToTop, {}), _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.
export var GlTemplate = memo(function (props) {
    var ThemeProvider = useThemeProvider().ThemeProvider;
    var children = (_jsx(GlTemplateInner, __assign({}, props, { doTakeChargeOfHidingRootSplashScreen: ThemeProvider !== undefined })));
    return ThemeProvider === undefined ? (children) : (_jsx(ThemeProvider, __assign({ splashScreen: splashScreen }, { children: children })));
});
var useThemeProvider = (function () {
    var getThemeProvider = memoize(function (isThemeProvided) {
        if (isThemeProvided) {
            return undefined;
        }
        var ThemeProvider = createThemeProvider({}).ThemeProvider;
        return ThemeProvider;
    });
    function useThemeProvider() {
        var isThemeProvided = useIsThemeProvided();
        var ThemeProvider = getThemeProvider(isThemeProvided);
        return { ThemeProvider: ThemeProvider };
    }
    return { useThemeProvider: useThemeProvider };
})().useThemeProvider;
var useStyles = tss
    .withName({ GlTemplate: GlTemplate })
    .withParams()
    .create(function (_a) {
    var theme = _a.theme, 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": 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",
        },
        "bodyAndFooterWrapper": {
            "overflowX": "hidden",
            "display": "flex",
            "flexDirection": "column",
            "minHeight": window.innerHeight - headerHeight,
        },
    };
});
//# sourceMappingURL=GlTemplate.js.map