"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 __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");
/* eslint-disable @typescript-eslint/no-namespace */
/* eslint-disable @typescript-eslint/no-explicit-any */
var Link_1 = __importDefault(require("@mui/material/Link"));
var useNamedState_1 = require("powerhooks/useNamedState");
var useConstCallback_1 = require("powerhooks/useConstCallback");
var react_1 = require("react");
var theme_1 = require("./theme");
var GlGithubStarCount_1 = require("./utils/GlGithubStarCount");
var FormatListBulleted_1 = __importDefault(require("@mui/icons-material/FormatListBulleted"));
var powerhooks_1 = require("powerhooks");
var theme_2 = require("./theme");
var GlDarkModeSwitch_1 = require("./utils/GlDarkModeSwitch");
var useDomRect_1 = require("powerhooks/useDomRect");
exports.GlHeader = react_1.memo(function (props) {
    var className = props.className, title = props.title, links = props.links, enableDarkModeSwitch = props.enableDarkModeSwitch, githubButtonSize = props.githubButtonSize, githubRepoUrl = props.githubRepoUrl, titleDark = props.titleDark, titleSmallScreen = props.titleSmallScreen, titleSmallScreenDark = props.titleSmallScreenDark, classesProp = props.classes, showGithubStarCount = props.showGithubStarCount;
    var _a = useNamedState_1.useNamedState("isMenuUnfolded", false), isMenuUnfolded = _a.isMenuUnfolded, setIsMenuUnfolded = _a.setIsMenuUnfolded;
    var unfoldLinks = useConstCallback_1.useConstCallback(function () {
        setIsMenuUnfolded(!isMenuUnfolded);
    });
    var rootRef = powerhooks_1.useClickAway(function () {
        setIsMenuUnfolded(false);
    }).rootRef;
    var _b = useDomRect_1.useDomRect(), linkRef = _b.ref, linkHeight = _b.domRect.height;
    var _c = useStyles({
        isMenuUnfolded: isMenuUnfolded,
        "numberOfLinks": links !== undefined ? links.length : 0,
        linkHeight: linkHeight,
    }), classes = _c.classes, cx = _c.cx, theme = _c.theme;
    return (jsx_runtime_1.jsxs("header", __assign({ className: cx(classes.root, className) }, { children: [jsx_runtime_1.jsx("div", __assign({ className: cx(classes.title, classesProp === null || classesProp === void 0 ? void 0 : classesProp.title) }, { children: typeof title === "string" ? (jsx_runtime_1.jsx("div", __assign({ className: cx(classes.titleInner, classesProp === null || classesProp === void 0 ? void 0 : classesProp.titleInner) }, { children: jsx_runtime_1.jsx(theme_1.Text, __assign({ typo: "subtitle" }, { children: title }), void 0) }), void 0)) : (jsx_runtime_1.jsx("div", __assign({ className: cx(classes.titleInner, classesProp === null || classesProp === void 0 ? void 0 : classesProp.titleInner) }, { children: (function () {
                        var _a;
                        if (theme.windowInnerWidth >= theme_2.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;
                    })() }), void 0)) }), void 0),
            jsx_runtime_1.jsx("div", __assign({ className: cx(classes.links, classesProp === null || classesProp === void 0 ? void 0 : classesProp.links) }, { children: links.map(function (_a, index) {
                    var link = _a.link, label = _a.label;
                    return (jsx_runtime_1.jsx("div", __assign({ ref: index === 0 ? linkRef : undefined, className: cx(classes.linkWrapper, classesProp === null || classesProp === void 0 ? void 0 : classesProp.linkWrapper) }, { children: jsx_runtime_1.jsx(Link_1.default, __assign({ underline: "hover", className: cx(classes.link, classesProp === null || classesProp === void 0 ? void 0 : classesProp.link) }, link, { children: label }), void 0) }), label));
                }) }), void 0),
            githubRepoUrl !== undefined && (jsx_runtime_1.jsx(GlGithubStarCount_1.GlGithubStarCount, { repoUrl: githubRepoUrl, size: githubButtonSize, showCount: showGithubStarCount, className: cx(classes.githubStarAndDarkModeSwitch, classesProp === null || classesProp === void 0 ? void 0 : classesProp.githubStar) }, void 0)),
            enableDarkModeSwitch !== undefined && enableDarkModeSwitch && (jsx_runtime_1.jsx(GlDarkModeSwitch_1.GlDarkModeSwitch, { className: cx(classes.githubStarAndDarkModeSwitch, classesProp === null || classesProp === void 0 ? void 0 : classesProp.darkModeSwitch) }, void 0)),
            jsx_runtime_1.jsx(FormatListBulleted_1.default, { ref: rootRef, onClick: unfoldLinks, className: cx(classes.unfoldIcon, classesProp === null || classesProp === void 0 ? void 0 : classesProp.unfoldButton) }, void 0)] }), void 0));
});
var useStyles = theme_1.makeStyles()(function (theme, _a) {
    var isMenuUnfolded = _a.isMenuUnfolded, numberOfLinks = _a.numberOfLinks, linkHeight = _a.linkHeight;
    var linkMarginTopBottom = theme.spacing(3);
    return {
        "root": __assign({ "display": "flex", "alignItems": "center", "width": "100%", "flexWrap": (function () {
                if (theme.windowInnerWidth >= theme_2.breakpointsValues.md) {
                    return undefined;
                }
                return "wrap";
            })() }, theme.spacing.rightLeft("padding", theme.paddingRightLeft + "px")),
        "title": {
            "display": "flex",
            "flex": 1,
            "marginRight": theme.spacing(2),
        },
        "links": __assign({ "display": "flex", "transition": "height 300ms" }, (function () {
            if (theme.windowInnerWidth >= theme_2.breakpointsValues.md) {
                return {
                    "flexWrap": "wrap",
                };
            }
            return {
                "order": 123,
                "flex": "100%",
                "flexDirection": "column",
                "height": (function () {
                    if (isMenuUnfolded) {
                        return ((linkHeight + linkMarginTopBottom * 2) *
                            numberOfLinks +
                            10);
                    }
                    return 0;
                })(),
                "overflow": "hidden",
                "flexWrap": "nowrap",
                "marginTop": theme.spacing(2),
            };
        })()),
        "linkWrapper": __assign({}, (theme.windowInnerWidth >= theme_2.breakpointsValues.md
            ? __assign({}, (function () {
                var value = theme.spacing(4);
                return __assign({}, theme.spacing.rightLeft("margin", value + "px"));
            })()) : __assign({}, theme.spacing.topBottom("margin", linkMarginTopBottom + "px")))),
        "link": __assign({ "color": theme.colors.useCases.typography.textPrimary, "whiteSpace": "nowrap" }, theme.typography.variants["body 1"].style),
        "unfoldIcon": {
            "cursor": "pointer",
            "marginLeft": theme.spacing(2),
            "display": (function () {
                if (theme.windowInnerWidth >= theme_2.breakpointsValues.md) {
                    return "none";
                }
                return "flex";
            })(),
        },
        "githubStarAndDarkModeSwitch": {
            "margin": theme.spacing({
                "topBottom": 0,
                "rightLeft": 2,
            }),
        },
        "titleInner": {
            "display": "flex",
            "alignItems": "center",
        },
    };
});
//# sourceMappingURL=GlHeader.js.map