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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useState, useEffect, useCallback } from "react";
import { tss, breakpointsValues, Text } from "../theme";
import { GlHeaderLinks } from "./GlHeaderLinks";
import { GlDarkModeSwitch } from "../utils/GlDarkModeSwitch";
import { GlGithubStarCount } from "../utils/GlGithubStarCount";
import UnfoldIcon from "@mui/icons-material/FormatLineSpacing";
import { useConstCallback } from "powerhooks/useConstCallback";
import { useClickAway } from "powerhooks/useClickAway";
import { getScrollableParent } from "powerhooks/getScrollableParent";
import { useDomRect } from "powerhooks/useDomRect";
import { useEvt } from "evt/hooks/useEvt";
import { Evt } from "evt";
export var GlHeader = 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(useState(false), 2), isMenuUnfolded = _a[0], setIsMenuUnfolded = _a[1];
    var _b = __read(useState(undefined), 2), isSmallDevice = _b[0], setIsSmallDevice = _b[1];
    var _c = __read(useState(undefined), 2), breakpoint = _c[0], setBreakpoint = _c[1];
    var toggleMenuUnfolded = useConstCallback(function () {
        setIsMenuUnfolded(!isMenuUnfolded);
    });
    var ref = useClickAway({
        "onClickAway": function () {
            setIsMenuUnfolded(false);
        },
    }).ref;
    var _d = useDomRect({ ref: ref }).domRect, headerHeight = _d.height, headerWidth = _d.width;
    var _e = useDomRect(), titleRef = _e.ref, titleWidth = _e.domRect.width;
    var _f = useDomRect(), buttonsAndLinksRef = _f.ref, buttonsAndLinksWidth = _f.domRect.width;
    useEffect(function () {
        if (isSmallDevice) {
            return;
        }
        setIsMenuUnfolded(false);
    }, [isSmallDevice]);
    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]);
    useEvt(function (ctx) {
        if (!ref.current) {
            return;
        }
        var scrollableParent = getScrollableParent({
            "element": ref.current,
            "doReturnElementIfScrollable": true,
        });
        Evt.from(ctx, scrollableParent, "scroll").attach(function () {
            var scrollTop = scrollableParent.scrollTop;
            if (headerHeight < scrollTop) {
                setIsMenuUnfolded(false);
            }
        });
    }, [ref.current, headerHeight]);
    var getCustomItemBehavior = useCallback(function (customItem) {
        var _a;
        if (customItem === undefined) {
            return "normal";
        }
        return (_a = customItem.behaviorOnSmallDevice) !== null && _a !== void 0 ? _a : "normal";
    }, [
        customItemStart === null || customItemStart === void 0 ? void 0 : customItemStart.behaviorOnSmallDevice,
        customItemEnd === null || customItemEnd === void 0 ? void 0 : customItemEnd.behaviorOnSmallDevice,
    ]);
    var _g = useStyles({
        isSmallDevice: isSmallDevice,
        "customItemStartSmallBehavior": getCustomItemBehavior(customItemStart),
        "customItemEndSmallBehavior": getCustomItemBehavior(customItemEnd),
        "classesOverrides": props.classes,
    }), theme = _g.theme, classes = _g.classes, cx = _g.cx;
    useEffect(function () {
        if (customBreakpoint !== undefined) {
            setIsSmallDevice(theme.windowInnerWidth < customBreakpoint);
            return;
        }
        if (breakpoint === undefined) {
            return;
        }
        setIsSmallDevice(theme.windowInnerWidth < breakpoint ||
            theme.windowInnerWidth < breakpointsValues.sm);
    }, [theme.windowInnerWidth, breakpoint]);
    return (_jsxs("header", __assign({ ref: ref, className: cx(classes.root, className) }, { children: [_jsxs("div", __assign({ className: classes.largeScreenContentWrapper }, { children: [(function () {
                        return (_jsx("div", __assign({ ref: titleRef, className: classes.titleWrapper }, { children: (function () {
                                var _a, _b;
                                var transformElementIfString = function (element) {
                                    if (typeof element === "string") {
                                        return (_jsx(Text, __assign({ className: classes.titleText, typo: "subtitle" }, { children: element })));
                                    }
                                    return element;
                                };
                                if (theme.windowInnerWidth >=
                                    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);
                            })() })));
                    })(), _jsxs("div", __assign({ ref: buttonsAndLinksRef, className: classes.linkAndButtonWrapper }, { children: [customItemStart !== undefined && (_jsx("div", __assign({ className: cx(classes.commonCustomItemWrapper, classes.customItemStartWrapper) }, { children: customItemStart.item }))), _jsx("div", __assign({ className: classes.linksWrapperLargeScreen }, { children: _jsx(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 && (_jsx(GlGithubStarCount, { repoUrl: githubRepoUrl, size: githubButtonSize, showCount: showGithubStarCount, className: classes.githubStar })), enableDarkModeSwitch !== undefined &&
                                enableDarkModeSwitch && (_jsx(GlDarkModeSwitch, { className: classes.darkModeSwitch })), customItemEnd !== undefined && (_jsx("div", __assign({ className: cx(classes.commonCustomItemWrapper, classes.customItemEndWrapper) }, { children: customItemEnd.item }))), _jsx("div", __assign({ className: classes.unfoldIconWrapper, onClick: toggleMenuUnfolded }, { children: _jsx(UnfoldIcon, { className: classes.unfoldIcon }) }))] }))] })), (customItemStart !== undefined || customItemEnd !== undefined) && (_jsxs("div", __assign({ className: classes.smallDeviceCustomItemsWrapper }, { children: [customItemStart !== undefined && (_jsx("div", __assign({ className: cx(classes.commonSmallDeviceCustomItemWrapper, classes.smallDeviceCustomItemStartWrapper) }, { children: customItemStart.item }))), customItemEnd !== undefined && (_jsx("div", __assign({ className: cx(classes.commonSmallDeviceCustomItemWrapper, classes.smallDeviceCustomItemEndWrapper) }, { children: customItemEnd.item })))] }))), _jsx(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 = tss
    .withName({ GlHeader: GlHeader })
    .withParams()
    .create(function (_a) {
    var theme = _a.theme, isSmallDevice = _a.isSmallDevice, customItemEndSmallBehavior = _a.customItemEndSmallBehavior, customItemStartSmallBehavior = _a.customItemStartSmallBehavior;
    function getSmallDeviceCustomItemDisplay(behavior) {
        if (isSmallDevice && behavior === "wrap") {
            return undefined;
        }
        return "none";
    }
    function getCustomItemDisplay(behavior) {
        if (!isSmallDevice) {
            return undefined;
        }
        return behavior === "normal" ? undefined : "none";
    }
    return {
        "root": {
            "padding": theme.spacing({
                "rightLeft": "".concat(theme.paddingRightLeft, "px"),
                "topBottom": "".concat(theme.spacing(3), "px"),
            }),
            "position": "relative",
            "opacity": isSmallDevice === undefined ? 0 : 1,
            "maxWidth": "100%",
            "overflowX": !isSmallDevice ? "hidden" : undefined,
        },
        "largeScreenContentWrapper": {
            "display": "flex",
            "justifyContent": "space-between",
            "alignItems": "center",
        },
        "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,
        },
        "smallDeviceCustomItemsWrapper": __assign({ "display": !isSmallDevice ? "none" : "grid", "gridAutoFlow": "row", "alignItems": "end" }, (function () {
            var value = theme.spacing(3);
            return __assign({ "gap": value }, theme.spacing.topBottom("margin", "".concat(value, "px")));
        })()),
        "commonSmallDeviceCustomItemWrapper": {
            "display": "flex",
            "justifyContent": "flex-end",
        },
        "smallDeviceCustomItemStartWrapper": {
            "display": getSmallDeviceCustomItemDisplay(customItemStartSmallBehavior),
        },
        "smallDeviceCustomItemEndWrapper": {
            "display": getSmallDeviceCustomItemDisplay(customItemEndSmallBehavior),
        },
        "customItemStartWrapper": {
            "display": getCustomItemDisplay(customItemStartSmallBehavior),
        },
        "customItemEndWrapper": {
            "display": getCustomItemDisplay(customItemEndSmallBehavior),
        },
        "commonCustomItemWrapper": {},
        "unfoldIcon": {},
        "githubStar": {},
        "darkModeSwitch": {},
        "linkRoot": {},
        "underline": {},
        "linkRootSmallScreen": {},
        "underlineSmallScreen": {},
        "linkSmallScreen": {},
        "linksContentWrapper": {},
        "linksContentWrapperSmallScreen": {},
        "linksOverline": {},
    };
});
//# sourceMappingURL=GlHeader.js.map