"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.GlHeader = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var theme_1 = require("../theme");
var GlHeaderLinks_1 = require("./GlHeaderLinks");
var GlDarkModeSwitch_1 = require("../utils/GlDarkModeSwitch");
var GlGithubStarCount_1 = require("../utils/GlGithubStarCount");
var FormatLineSpacing_1 = __importDefault(require("@mui/icons-material/FormatLineSpacing"));
var useConstCallback_1 = require("powerhooks/useConstCallback");
var useClickAway_1 = require("powerhooks/useClickAway");
var getScrollableParent_1 = require("powerhooks/getScrollableParent");
var useDomRect_1 = require("powerhooks/useDomRect");
var useEvt_1 = require("evt/hooks/useEvt");
var evt_1 = require("evt");
exports.GlHeader = (0, react_1.memo)(function (props) {
    var links = props.links, className = props.className, customItemEnd = props.customItemEnd, customItemStart = props.customItemStart, enableDarkModeSwitch = props.enableDarkModeSwitch, githubButtonSize = props.githubButtonSize, githubRepoUrl = props.githubRepoUrl, showGithubStarCount = props.showGithubStarCount, title = props.title, titleDark = props.titleDark, titleSmallScreen = props.titleSmallScreen, titleSmallScreenDark = props.titleSmallScreenDark, customBreakpoint = props.customBreakpoint;
    var _a = __read((0, react_1.useState)(false), 2), isMenuUnfolded = _a[0], setIsMenuUnfolded = _a[1];
    var _b = __read((0, react_1.useState)(undefined), 2), isSmallDevice = _b[0], setIsSmallDevice = _b[1];
    var _c = __read((0, react_1.useState)(undefined), 2), breakpoint = _c[0], setBreakpoint = _c[1];
    var toggleMenuUnfolded = (0, useConstCallback_1.useConstCallback)(function () {
        setIsMenuUnfolded(!isMenuUnfolded);
    });
    var ref = (0, useClickAway_1.useClickAway)({
        "onClickAway": function () {
            setIsMenuUnfolded(false);
        },
    }).ref;
    var _d = (0, useDomRect_1.useDomRect)({ ref: ref }).domRect, headerHeight = _d.height, headerWidth = _d.width;
    var _e = (0, useDomRect_1.useDomRect)(), titleRef = _e.ref, titleWidth = _e.domRect.width;
    var _f = (0, useDomRect_1.useDomRect)(), buttonsAndLinksRef = _f.ref, buttonsAndLinksWidth = _f.domRect.width;
    (0, react_1.useEffect)(function () {
        if (isSmallDevice) {
            return;
        }
        setIsMenuUnfolded(false);
    }, [isSmallDevice]);
    (0, react_1.useEffect)(function () {
        if (isSmallDevice ||
            titleWidth === 0 ||
            buttonsAndLinksWidth === 0 ||
            headerWidth === 0 ||
            customBreakpoint !== undefined) {
            return;
        }
        var contentWidth = titleWidth +
            buttonsAndLinksWidth +
            theme.spacing(7) +
            2 * theme.paddingRightLeft;
        if (headerWidth < contentWidth && breakpoint !== undefined) {
            return;
        }
        setBreakpoint(contentWidth);
    }, [titleWidth, buttonsAndLinksWidth, headerWidth, isSmallDevice]);
    (0, useEvt_1.useEvt)(function (ctx) {
        if (!ref.current) {
            return;
        }
        var scrollableParent = (0, getScrollableParent_1.getScrollableParent)({
            "element": ref.current,
            "doReturnElementIfScrollable": true,
        });
        evt_1.Evt.from(ctx, scrollableParent, "scroll").attach(function () {
            var scrollTop = scrollableParent.scrollTop;
            if (headerHeight < scrollTop) {
                setIsMenuUnfolded(false);
            }
        });
    }, [ref.current, headerHeight]);
    var _g = useStyles({ isSmallDevice: isSmallDevice }, { props: props }), theme = _g.theme, classes = _g.classes, cx = _g.cx;
    (0, react_1.useEffect)(function () {
        if (customBreakpoint !== undefined) {
            setIsSmallDevice(theme.windowInnerWidth < customBreakpoint);
            return;
        }
        if (breakpoint === undefined) {
            return;
        }
        setIsSmallDevice(theme.windowInnerWidth < breakpoint ||
            theme.windowInnerWidth < theme_1.breakpointsValues.sm);
    }, [theme.windowInnerWidth, breakpoint]);
    return ((0, jsx_runtime_1.jsxs)("header", __assign({ ref: ref, className: cx(classes.root, className) }, { children: [(function () {
                return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: titleRef, className: classes.titleWrapper }, { children: (function () {
                        var _a, _b;
                        var transformElementIfString = function (element) {
                            if (typeof element === "string") {
                                return ((0, jsx_runtime_1.jsx)(theme_1.Text, __assign({ className: classes.titleText, typo: "subtitle" }, { children: element })));
                            }
                            return element;
                        };
                        if (theme.windowInnerWidth >= theme_1.breakpointsValues.md) {
                            if (!theme.isDarkModeEnabled) {
                                return transformElementIfString(title);
                            }
                            return transformElementIfString(titleDark !== null && titleDark !== void 0 ? titleDark : title);
                        }
                        if (!theme.isDarkModeEnabled) {
                            return transformElementIfString(titleSmallScreen !== null && titleSmallScreen !== void 0 ? titleSmallScreen : title);
                        }
                        return transformElementIfString((_b = (_a = titleSmallScreenDark !== null && titleSmallScreenDark !== void 0 ? titleSmallScreenDark : titleSmallScreen) !== null && _a !== void 0 ? _a : titleDark) !== null && _b !== void 0 ? _b : title);
                    })() })));
            })(), (0, jsx_runtime_1.jsxs)("div", __assign({ ref: buttonsAndLinksRef, className: classes.linkAndButtonWrapper }, { children: [customItemStart !== undefined && customItemStart, (0, jsx_runtime_1.jsx)("div", __assign({ className: classes.linksWrapperLargeScreen }, { children: (0, jsx_runtime_1.jsx)(GlHeaderLinks_1.GlHeaderLinks, { classes: {
                                "contentWrapper": classes.linksContentWrapper,
                            }, className: classes.links, links: links.map(function (link) { return (__assign(__assign({}, link), { "classes": {
                                    "link": classes.link,
                                    "underline": classes.underline,
                                }, "className": classes.linkRoot })); }), type: "largeScreen" }) })), githubRepoUrl !== undefined && ((0, jsx_runtime_1.jsx)(GlGithubStarCount_1.GlGithubStarCount, { repoUrl: githubRepoUrl, size: githubButtonSize, showCount: showGithubStarCount, className: classes.githubStar })), enableDarkModeSwitch !== undefined && enableDarkModeSwitch && ((0, jsx_runtime_1.jsx)(GlDarkModeSwitch_1.GlDarkModeSwitch, { className: classes.darkModeSwitch })), customItemEnd !== undefined && customItemEnd, (0, jsx_runtime_1.jsx)("div", __assign({ className: classes.unfoldIconWrapper, onClick: toggleMenuUnfolded }, { children: (0, jsx_runtime_1.jsx)(FormatLineSpacing_1.default, { className: classes.unfoldIcon }) }))] })), (0, jsx_runtime_1.jsx)(GlHeaderLinks_1.GlHeaderLinks, { classes: {
                    "contentWrapper": classes.linksContentWrapperSmallScreen,
                    "overline": classes.linksOverline,
                }, links: links.map(function (link) { return (__assign(__assign({}, link), { "classes": {
                        "link": classes.linkSmallScreen,
                        "root": classes.linkRootSmallScreen,
                        "underline": classes.underlineSmallScreen,
                    } })); }), className: classes.smallDeviceLinks, type: "smallScreen", isUnfolded: isMenuUnfolded })] })));
});
var useStyles = (0, theme_1.makeStyles)({
    "name": { GlHeader: exports.GlHeader },
})(function (theme, _a) {
    var isSmallDevice = _a.isSmallDevice;
    return {
        "root": {
            "padding": theme.spacing({
                "rightLeft": "".concat(theme.paddingRightLeft, "px"),
                "topBottom": "".concat(theme.spacing(3), "px"),
            }),
            "position": "relative",
            "display": "flex",
            "justifyContent": "space-between",
            "alignItems": "center",
            "opacity": isSmallDevice === undefined ? 0 : 1,
            "maxWidth": "100%",
            "overflowX": !isSmallDevice ? "hidden" : undefined,
        },
        "titleWrapper": {
            "marginRight": isSmallDevice ? undefined : theme.spacing(8),
        },
        "titleText": {
            "whiteSpace": "nowrap",
        },
        "linkAndButtonWrapper": {
            "display": "grid",
            "gridAutoFlow": "column",
            "alignItems": "center",
            "gap": theme.spacing(3),
        },
        "link": {
            "marginTop": theme.spacing(1),
        },
        "smallDeviceLinks": {
            "position": "absolute",
            "top": "100%",
            "left": 0,
            "width": "100%",
        },
        "unfoldIconWrapper": {
            "display": isSmallDevice ? "flex" : "none",
            "alignItems": "center",
        },
        "links": {
            "order": 2,
            "display": isSmallDevice ? "none" : "flex",
            "pointerEvents": isSmallDevice ? "none" : undefined,
        },
        "linksWrapperLargeScreen": {
            "order": isSmallDevice ? -1 : undefined,
        },
        "unfoldIcon": {},
        "githubStar": {},
        "darkModeSwitch": {},
        "linkRoot": {},
        "underline": {},
        "linkRootSmallScreen": {},
        "underlineSmallScreen": {},
        "linkSmallScreen": {},
        "linksContentWrapper": {},
        "linksContentWrapperSmallScreen": {},
        "linksOverline": {},
    };
});
//# sourceMappingURL=GlHeader.js.map