"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 theme_2 = require("./theme");
var theme_3 = require("./theme");
var FormatLineSpacing_1 = __importDefault(require("@mui/icons-material/FormatLineSpacing"));
var useDomRect_1 = require("powerhooks/useDomRect");
var useConstCallback_1 = require("powerhooks/useConstCallback");
var useClickAway_1 = require("powerhooks/useClickAway");
var GlDarkModeSwitch_1 = require("./utils/GlDarkModeSwitch");
var evt_1 = require("evt");
var useEvt_1 = require("evt/hooks/useEvt");
var GlGithubStarCount_1 = require("./utils/GlGithubStarCount");
var useGetScrollableParent_1 = require("./tools/useGetScrollableParent");
var symToStr_1 = require("tsafe/symToStr");
exports.GlHeader = (0, react_1.memo)(function (props) {
    var _a, _b;
    var links = props.links, title = props.title, className = props.className, enableDarkModeSwitch = props.enableDarkModeSwitch, githubButtonSize = props.githubButtonSize, githubRepoUrl = props.githubRepoUrl, showGithubStarCount = props.showGithubStarCount, titleDark = props.titleDark, titleSmallScreen = props.titleSmallScreen, titleSmallScreenDark = props.titleSmallScreenDark, customItemStart = props.customItemStart, customItemEnd = props.customItemEnd;
    var _c = __read((0, react_1.useState)(false), 2), isMenuUnfolded = _c[0], setIsMenuUnfolded = _c[1];
    var _d = (0, useDomRect_1.useDomRect)(), headerHeight = _d.domRect.height, headerRef = _d.ref;
    var _e = (0, useDomRect_1.useDomRect)(), linksHeight = _e.domRect.height, smallDeviceLinksRef = _e.ref;
    var linksRef = (0, react_1.useRef)(null);
    var titleRef = (0, react_1.useRef)(null);
    var _f = __read((0, react_1.useState)(0), 2), buttonsWidth = _f[0], setButtonsWidth = _f[1];
    var _g = __read((0, react_1.useState)(0), 2), titleWidth = _g[0], setTitleWidth = _g[1];
    var scrollableParent = (0, useGetScrollableParent_1.useGetScrollableParent)({ "ref": headerRef }).scrollableParent;
    (0, react_1.useEffect)(function () {
        if (!titleRef.current || !linksRef.current) {
            return;
        }
        setButtonsWidth(linksRef.current.clientWidth);
        setTitleWidth(titleRef.current.clientWidth);
    }, [(_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth, (_b = linksRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth]);
    var ref = (0, useClickAway_1.useClickAway)({
        "onClickAway": function () {
            if (!isMenuUnfolded) {
                return;
            }
            setIsMenuUnfolded(false);
        },
    }).ref;
    var toggleMenu = (0, useConstCallback_1.useConstCallback)(function () {
        setIsMenuUnfolded(!isMenuUnfolded);
    });
    (0, useEvt_1.useEvt)(function (ctx) {
        if (scrollableParent === undefined) {
            return;
        }
        evt_1.Evt.from(ctx, scrollableParent, "scroll").attach(function () {
            var scrollTop = (function () {
                if (scrollableParent === window) {
                    return scrollableParent
                        .scrollY;
                }
                return scrollableParent.scrollTop;
            })();
            if (headerHeight < scrollTop) {
                setIsMenuUnfolded(false);
            }
        });
    }, [headerHeight]);
    var _h = useStyles({
        headerHeight: headerHeight,
        isMenuUnfolded: isMenuUnfolded,
        linksHeight: linksHeight,
        buttonsWidth: buttonsWidth,
        titleWidth: titleWidth,
    }, { props: props }), classes = _h.classes, cx = _h.cx, theme = _h.theme;
    return ((0, jsx_runtime_1.jsxs)("header", __assign({ className: cx(classes.root, className), ref: headerRef }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: classes.headerInner }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ ref: titleRef, className: classes.title }, { children: typeof title === "string" ? ((0, jsx_runtime_1.jsx)(theme_2.Text, __assign({ typo: "subtitle" }, { children: title }))) : ((function () {
                            var _a;
                            if (theme.windowInnerWidth >= theme_3.breakpointsValues.md) {
                                if (theme.isDarkModeEnabled) {
                                    return titleDark !== null && titleDark !== void 0 ? titleDark : title;
                                }
                                return title;
                            }
                            if (theme.isDarkModeEnabled) {
                                return ((_a = titleSmallScreenDark !== null && titleSmallScreenDark !== void 0 ? titleSmallScreenDark : titleSmallScreen) !== null && _a !== void 0 ? _a : title);
                            }
                            return titleSmallScreen !== null && titleSmallScreen !== void 0 ? titleSmallScreen : title;
                        })()) })), (0, jsx_runtime_1.jsxs)("div", __assign({ ref: linksRef, className: classes.buttonAndLinkWrapper }, { children: [customItemStart !== undefined && customItemStart, (0, jsx_runtime_1.jsx)(Links, { className: classes.links, links: links, classes: {
                                    "text": classes.text,
                                    "linkWrapper": classes.linkWrapper,
                                    "linkUnderline": classes.linkUnderline,
                                } }), 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)("div", __assign({ className: classes.darkModeSwitch }, { children: (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: toggleMenu }, { children: (0, jsx_runtime_1.jsx)(FormatLineSpacing_1.default, { className: classes.unfoldIcon }) }))] }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ ref: ref, className: classes.smallDeviceLinksWrapper }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: classes.smallDeviceLinksInnerWrapper, ref: smallDeviceLinksRef }, { children: (0, jsx_runtime_1.jsx)(Links, { links: links, className: classes.smallDeviceLinks, classes: {
                            "link": classes.smallDeviceLink,
                            "text": classes.smallDeviceText,
                            "linkWrapper": classes.smallDeviceLinksInnerWrapper,
                            "linkUnderline": classes.smallDeviceLinkUnderline,
                        } }) })) }))] })));
});
var useStyles = (0, theme_1.makeStyles)({ "name": { GlHeader: exports.GlHeader } })(function (theme, _a) {
    var isMenuUnfolded = _a.isMenuUnfolded, linksHeight = _a.linksHeight, buttonsWidth = _a.buttonsWidth, titleWidth = _a.titleWidth, headerHeight = _a.headerHeight;
    var isCollapsibleMenu = buttonsWidth + theme.spacing(9) + theme.paddingRightLeft * 2 >
        theme.windowInnerWidth - titleWidth ||
        theme.windowInnerWidth < theme_3.breakpointsValues.sm;
    return {
        "root": {
            "position": "relative",
        },
        "unfoldIconWrapper": {
            "pointerEvents": isMenuUnfolded ? "none" : undefined,
        },
        "headerInner": {
            "display": "flex",
            "justifyContent": "space-between",
            "alignItems": "center",
            "position": "relative",
        },
        "unfoldIcon": __assign(__assign({ "display": "none", "pointerEvents": "none" }, (isCollapsibleMenu
            ? {
                "display": "block",
                "pointerEvents": "unset",
            }
            : {})), { "marginLeft": theme.spacing(2) }),
        "smallDeviceLinksWrapper": __assign(__assign({ 
            //"zIndex": 4,
            "position": "absolute", "left": -theme.paddingRightLeft, "backgroundColor": theme.colors.useCases.surfaces.background, "top": headerHeight + theme.spacing(3), "width": window.innerWidth, "opacity": 0, "height": 0, "overflow": "hidden", "pointerEvents": "none", "display": "flex", "flexDirection": "column", "alignItems": "flex-start", "justifyContent": "center", "transition": "height 350ms, border-top-color 200ms" }, theme.spacing.rightLeft("padding", "".concat(theme.paddingRightLeft, "px"))), (isCollapsibleMenu
            ? {
                "borderTop": isMenuUnfolded
                    ? "solid 1px ".concat(theme.colors.useCases.typography.textSecondary)
                    : undefined,
                "height": isMenuUnfolded ? linksHeight : 0,
                "opacity": 0.94,
                "pointerEvents": "unset",
            }
            : {})),
        "smallDeviceLinksInnerWrapper": __assign({}, theme.spacing.topBottom("padding", "".concat(theme.spacing(3), "px"))),
        "smallDeviceLinks": __assign({ "flexDirection": "column", "display": "flex" }, (isCollapsibleMenu
            ? {
                "opacity": 1,
                "pointerEvents": "unset",
            }
            : {})),
        "darkModeSwitch": __assign(__assign({}, (theme.windowInnerWidth < theme_3.breakpointsValues.md
            ? __assign({}, theme.spacing.rightLeft("margin", "".concat(theme.spacing(2), "px"))) : {})), { "marginLeft": theme.spacing((function () {
                if (theme.windowInnerWidth >= theme_3.breakpointsValues.md) {
                    return 2;
                }
                return 0;
            })()) }),
        "buttonAndLinkWrapper": {
            "position": "absolute",
            "right": 0,
            "display": "flex",
            "alignItems": "center",
        },
        "githubStar": __assign(__assign({}, (theme.windowInnerWidth >= theme_3.breakpointsValues.md
            ? {
                "paddingRight": theme.spacing(2),
            }
            : {})), { "marginLeft": theme.spacing((function () {
                if (theme.windowInnerWidth >= theme_3.breakpointsValues.md) {
                    return 2;
                }
                return 0;
            })()) }),
        "links": __assign({}, (function () {
            if (isCollapsibleMenu) {
                return {
                    "opacity": 0,
                    "pointerEvents": "none",
                };
            }
        })()),
        "title": {},
        "text": {},
        "linkWrapper": {},
        "linkUnderline": {},
        "smallDeviceText": {},
        "smallDeviceLink": {
            "margin": 0,
        },
        "smallDeviceLinkUnderline": {
            "left": isCollapsibleMenu ? theme.spacing(2) : undefined,
        },
        "darkModeSwitchWrapper": {},
    };
});
var Links = (function () {
    var Links = (0, react_1.memo)(function (props) {
        var links = props.links, className = props.className;
        var _a = useStyles(undefined, { props: props }), classes = _a.classes, cx = _a.cx;
        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: cx(classes.links, className) }, { children: links.map(function (_a) {
                var href = _a.href, label = _a.label, onClick = _a.onClick;
                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: classes.linkWrapper }, { children: (0, jsx_runtime_1.jsx)(Link, { className: classes.link, href: href, label: label, onClick: onClick, classes: {
                            "text": classes.text,
                            "underline": classes.linkUnderline,
                        } }) }), label));
            }) })));
    });
    var useStyles = (0, theme_1.makeStyles)({
        "name": "".concat((0, symToStr_1.symToStr)({ GlHeader: exports.GlHeader })).concat((0, symToStr_1.symToStr)({ Links: Links })),
    })({
        "links": {
            "display": "flex",
            "justifyContent": "center",
            "flex": 1,
        },
        "linkWrapper": {
            "display": "flex",
        },
        "text": {
            "cursor": "pointer",
        },
        "linkUnderline": {},
        "link": {},
    });
    return { Links: Links };
})().Links;
var Link = (function () {
    var Link = (0, react_1.memo)(function (props) {
        var _a;
        var href = props.href, label = props.label, onClick = props.onClick, className = props.className;
        var ref = (0, react_1.useRef)(null);
        var _b = __read((0, react_1.useState)(0), 2), elementWidth = _b[0], setElementWidth = _b[1];
        (0, react_1.useEffect)(function () {
            if (!ref.current) {
                return;
            }
            setElementWidth(ref.current.clientWidth);
        }, [(_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientWidth]);
        var _c = useStyles({ elementWidth: elementWidth }, { props: props }), classes = _c.classes, cx = _c.cx;
        return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: ref, onClick: onClick !== null && onClick !== void 0 ? onClick : (function () { return (window.location.href = href); }), className: cx(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(theme_2.Text, __assign({ typo: "label 1", className: classes.text }, { children: label })), (0, jsx_runtime_1.jsx)("div", { className: classes.underline })] })));
    });
    var useStyles = (0, theme_1.makeStyles)({
        "name": "".concat((0, symToStr_1.symToStr)({ GlHeader: exports.GlHeader })).concat((0, symToStr_1.symToStr)({ Link: Link })),
    })(function (theme, _a, classes) {
        var _b;
        var elementWidth = _a.elementWidth;
        return {
            "root": __assign(__assign({ "display": "flex", "flexDirection": "column" }, theme.spacing.rightLeft("margin", "".concat(theme.spacing(3), "px"))), (_b = { "&: hover": {
                        "cursor": "pointer",
                    } }, _b["&:hover .".concat(classes.underline)] = {
                "width": elementWidth,
            }, _b["& :active"] = {
                "color": theme.colors.useCases.buttons.actionActive,
            }, _b["&:active .".concat(classes.underline)] = {
                "backgroundColor": theme.colors.useCases.buttons.actionActive,
            }, _b)),
            "underline": {
                "width": 0,
                "marginTop": theme.spacing(1),
                "height": 1,
                "backgroundColor": theme.colors.useCases.typography.textPrimary,
                "transition": "width 200ms, background-color 100ms",
            },
            "text": __assign(__assign({}, theme.spacing.rightLeft("padding", "".concat(theme.spacing(2), "px"))), { "transition": "color 100ms" }),
        };
    });
    return { Link: Link };
})().Link;
//# sourceMappingURL=GlHeader.js.map