"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 = exports.scrollableDivId = exports.splashScreenState = 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 hooks_1 = require("evt/hooks");
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");
exports.splashScreenState = {
    "isShown": true,
};
exports.scrollableDivId = "GlScrollable";
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 headerOptions = (function () {
        var _a, _b, _c;
        var headerOptions = props.headerOptions;
        if (headerOptions === undefined) {
            return {
                "position": "fixed",
                "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, "doDelegateScroll": (_c = headerOptions.doDelegateScroll) !== 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, hooks_1.useElementEvt)(function (_a) {
        var ctx = _a.ctx, element = _a.element;
        if (headerOptions.isRetracted !== "smart") {
            return;
        }
        var previousScrollTop = 0;
        evt_1.Evt.from(ctx, element, "scroll").attach(function (e) {
            var scrollTop = e.target.scrollTop;
            setIsSmartHeaderVisible(scrollTop < previousScrollTop
                ? true
                : scrollTop <= headerHeight);
            previousScrollTop = scrollTop;
        });
    }, childrenWrapperRef, [headerHeight, headerOptions.isRetracted]);
    var _d = useStyles({
        rootWidth: rootWidth,
        headerHeight: headerHeight,
        "isHeaderRetracted": headerOptions.isRetracted === "smart"
            ? !isSmartHeaderVisible
            : headerOptions.isRetracted,
        "headerPosition": headerOptions.position,
        "doDelegateScroll": headerOptions.position === "fixed"
            ? false
            : headerOptions.doDelegateScroll,
    }), classes = _d.classes, cx = _d.cx;
    classes = (0, tss_react_1.useMergedClasses)(classes, classesProp);
    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: classes.headerWrapper }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ ref: headerWrapperRef }, { children: header }), void 0) }), void 0), (0, jsx_runtime_1.jsxs)("div", __assign({ className: classes.childrenWrapper, ref: childrenWrapperRef, id: headerOptions.position === "top of page" &&
                    headerOptions.doDelegateScroll
                    ? undefined
                    : exports.scrollableDivId }, { children: [children, hasTopOfPageLinkButton && (0, jsx_runtime_1.jsx)(GlLinkToTop_1.GlLinkToTop, {}, void 0), (0, jsx_runtime_1.jsx)("div", __assign({ className: classes.footerWrapper }, { children: footer }), void 0)] }), void 0)] }), void 0));
});
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 }), void 0));
    return isThemeProvided ? (children) : ((0, jsx_runtime_1.jsx)(ThemeProvider, __assign({ splashScreen: SplashScreenLogo === undefined
            ? undefined
            : {
                "Logo": SplashScreenLogo,
                "fillColor": splashScreenLogoFillColor,
                "minimumDisplayDuration": 0,
            } }, { children: children }), void 0));
});
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, doDelegateScroll = _a.doDelegateScroll;
    var paddingTopBottom = theme.spacing(3);
    var headerHeightPlusMargin = headerHeight + 2 * paddingTopBottom;
    return {
        "root": __assign({ "height": "100%" }, (function () {
            switch (headerPosition) {
                case "fixed":
                    return {
                        "visibility": headerHeight === 0 || rootWidth === 0
                            ? "hidden"
                            : "visible",
                    };
                case "top of page":
                    return doDelegateScroll
                        ? {
                            "display": "flex",
                            "flexDirection": "column",
                        }
                        : {
                            "overflow": "auto",
                            "scrollBehavior": "smooth",
                        };
            }
        })()),
        "headerWrapper": __assign(__assign({}, theme.spacing.topBottom("padding", "".concat(paddingTopBottom, "px"))), (function () {
            switch (headerPosition) {
                case "fixed":
                    return {
                        "zIndex": 1000,
                        "position": "fixed",
                        "width": rootWidth,
                        "transition": "top 350ms",
                        "top": !isHeaderRetracted
                            ? 0
                            : -headerHeightPlusMargin,
                        "backgroundColor": (0, onyxia_ui_3.changeColorOpacity)({
                            "color": theme.colors.useCases.surfaces
                                .background,
                            "opacity": 0.94,
                        }),
                    };
                case "top of page":
                    return __assign(__assign({}, (function () {
                        var height = headerHeight === 0
                            ? undefined
                            : isHeaderRetracted
                                ? 0
                                : headerHeightPlusMargin;
                        return __assign({ height: height }, (height !== 0
                            ? {}
                            : {
                                "paddingBottom": 0,
                            }));
                    })()), { "overflow": "hidden", "transition": ["height", "padding"]
                            .map(function (prop) { return "".concat(prop, " 250ms"); })
                            .join(", ") });
            }
        })()),
        "footerWrapper": {
            "marginTop": "auto",
            "position": "relative",
            "width": rootWidth,
            "left": -theme.paddingRightLeft,
        },
        "childrenWrapper": __assign(__assign({ "display": "flex", "flexDirection": "column", "overflowX": "hidden", "& > :first-child": __assign({ "position": "relative", "paddingTop": headerPosition === "fixed"
                    ? headerHeightPlusMargin
                    : undefined, "width": rootWidth, "left": -theme.paddingRightLeft }, theme.spacing.rightLeft("padding", "".concat(theme.paddingRightLeft, "px"))) }, theme.spacing.rightLeft("padding", "".concat(theme.paddingRightLeft, "px"))), (function () {
            switch (headerPosition) {
                case "fixed":
                    return {
                        "height": "100%",
                        "zIndex": 1,
                        "overflowY": "auto",
                        "scrollBehavior": "smooth",
                    };
                case "top of page":
                    return doDelegateScroll
                        ? {
                            "flex": 1,
                            "overflow": "hidden",
                        }
                        : {};
            }
        })()),
    };
});
//# sourceMappingURL=GlTemplate.js.map