"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 __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
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;
};
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 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 tss_react_1 = require("tss-react");
var disableEmotionWarnings_1 = require("./tools/disableEmotionWarnings");
(0, disableEmotionWarnings_1.disableEmotionWarnings)();
var GlTemplateInner = (0, react_1.memo)(function (props) {
    var header = props.header, isThemeProvidedOutside = props.isThemeProvidedOutside, children = props.children, footer = props.footer, className = props.className, classesProp = props.classes, hasTopOfPageLinkButton = props.hasTopOfPageLinkButton;
    var rootRef = (0, react_1.useRef)(null);
    var headerOptions = (function () {
        var _a, _b, _c;
        var headerOptions = props.headerOptions;
        if (headerOptions === undefined) {
            return {
                "position": "top of page",
                "isRetracted": false,
            };
        }
        switch (headerOptions.position) {
            case "fixed":
                return __assign(__assign({}, headerOptions), { "isRetracted": (_a = headerOptions.isRetracted) !== null && _a !== void 0 ? _a : false });
            case "top of page":
                return __assign(__assign({}, headerOptions), { "isRetracted": (_b = headerOptions.isRetracted) !== null && _b !== void 0 ? _b : false });
            case "sticky":
                return __assign(__assign({}, headerOptions), { "isRetracted": (_c = headerOptions.isRetracted) !== null && _c !== void 0 ? _c : false });
        }
    })();
    {
        var hideRootSplashScreen_1 = (0, onyxia_ui_1.useSplashScreen)().hideRootSplashScreen;
        (0, react_1.useEffect)(function () {
            if (isThemeProvidedOutside) {
                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, rootWidth = _b.domRect.width;
    var _c = __read((0, react_1.useState)(true), 2), isSmartHeaderVisible = _c[0], setIsSmartHeaderVisible = _c[1];
    (0, useEvt_1.useEvt)(function (ctx) {
        if (headerOptions.isRetracted !== "smart" || !rootRef.current) {
            return;
        }
        var previousScrollTop = 0;
        evt_1.Evt.from(ctx, rootRef.current, "scroll").attach(function () {
            var _a;
            if (!rootRef.current)
                return;
            var scrollTop = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop;
            setIsSmartHeaderVisible(scrollTop < previousScrollTop
                ? true
                : scrollTop <= headerHeight);
            previousScrollTop = scrollTop;
        });
    }, [headerHeight, headerOptions.isRetracted]);
    var _d = useStyles({
        rootWidth: rootWidth,
        headerHeight: headerHeight,
        "isHeaderRetracted": headerOptions.isRetracted === "smart"
            ? !isSmartHeaderVisible
            : headerOptions.isRetracted,
        "headerPosition": headerOptions.position,
    }), classes = _d.classes, cx = _d.cx;
    classes = (0, tss_react_1.useMergedClasses)(classes, classesProp);
    return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: rootRef, className: cx(classes.root, className), tabIndex: -1 }, { 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 }))] }))] })));
});
exports.GlTemplate = (0, react_1.memo)(function (props) {
    var _a = props.ThemeProvider, ThemeProvider = _a === void 0 ? theme_1.ThemeProviderDefault : _a, SplashScreenLogo = props.SplashScreenLogo, splashScreenLogoFillColor = props.splashScreenLogoFillColor, rest = __rest(props, ["ThemeProvider", "SplashScreenLogo", "splashScreenLogoFillColor"]);
    var isThemeProvided = (0, ThemeProvider_1.useIsThemeProvided)();
    var children = ((0, jsx_runtime_1.jsx)(GlTemplateInner, __assign({}, rest, { isThemeProvidedOutside: isThemeProvided })));
    return isThemeProvided ? (children) : ((0, jsx_runtime_1.jsx)(ThemeProvider, __assign({ splashScreen: SplashScreenLogo === undefined
            ? undefined
            : {
                "Logo": SplashScreenLogo,
                "fillColor": splashScreenLogoFillColor,
                "minimumDisplayDuration": 0,
            } }, { children: children })));
});
var useStyles = (0, theme_1.makeStyles)({ "name": { GlTemplate: exports.GlTemplate } })(function (theme, _a) {
    var headerHeight = _a.headerHeight, rootWidth = _a.rootWidth, isHeaderRetracted = _a.isHeaderRetracted, headerPosition = _a.headerPosition;
    return {
        "root": {
            "height": "100%",
            "overflow": "auto",
        },
        "headerWrapper": __assign({ "padding": theme.spacing({
                "rightLeft": "".concat(theme.paddingRightLeft, "px"),
                "topBottom": "".concat(theme.spacing(3), "px"),
            }) }, (function () {
            var out = {
                "zIndex": 4,
            };
            if (headerPosition === "fixed" ||
                headerPosition === "sticky") {
                out = __assign(__assign({}, out), { "width": rootWidth, "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 "fixed":
                    out = __assign(__assign({}, out), { "position": "fixed" });
                    break;
                case "sticky":
                    out = __assign(__assign({}, out), { "position": "sticky", "pointerEvents": isHeaderRetracted
                            ? "none"
                            : undefined });
                    break;
                case "top of page":
                    return {};
            }
            return out;
        })()),
        "footerWrapper": {
            "marginTop": "auto",
            "position": "relative",
            "width": rootWidth,
            "left": -theme.paddingRightLeft,
        },
        "childrenWrapper": __assign(__assign({ "display": "flex", "flexDirection": "column", "& > :first-child": __assign({ "position": "relative", "paddingTop": headerPosition === "fixed" ? headerHeight : undefined, "width": window.innerWidth, "left": -theme.paddingRightLeft }, theme.spacing.rightLeft("padding", "".concat(theme.paddingRightLeft, "px"))) }, theme.spacing.rightLeft("padding", "".concat(theme.paddingRightLeft, "px"))), { "minHeight": window.innerHeight }),
    };
});
//# sourceMappingURL=GlTemplate.js.map