"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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlHeaderLinks = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var GlHeaderLink_1 = require("./GlHeaderLink");
var theme_1 = require("../theme");
var useDomRect_1 = require("powerhooks/useDomRect");
exports.GlHeaderLinks = (0, react_1.memo)(function (props) {
    var links = props.links, className = props.className, type = props.type;
    var _a = (0, useDomRect_1.useDomRect)(), contentWrapperRef = _a.ref, contentWrapperHeight = _a.domRect.height;
    var _b = useStyles({
        type: type,
        contentWrapperHeight: contentWrapperHeight,
        "isUnfolded": type === "largeScreen" ? undefined : props.isUnfolded,
    }, { props: props }), classes = _b.classes, cx = _b.cx;
    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: cx(className, classes.root) }, { children: [type === "smallScreen" && (0, jsx_runtime_1.jsx)("div", { className: classes.overline }), (0, jsx_runtime_1.jsx)("div", __assign({ ref: contentWrapperRef, className: classes.contentWrapper }, { children: links.map(function (link) {
                    var _a, _b, _c;
                    return ((0, jsx_runtime_1.jsx)(GlHeaderLink_1.GlHeaderLink, __assign({}, link, { classes: {
                            "root": cx(classes.linkRoot, (_a = link.classes) === null || _a === void 0 ? void 0 : _a.root),
                            "link": cx(classes.link, (_b = link.classes) === null || _b === void 0 ? void 0 : _b.link),
                            "underline": (_c = link.classes) === null || _c === void 0 ? void 0 : _c.underline,
                        } })));
                }) }))] })));
});
var useStyles = (0, theme_1.makeStyles)()(function (theme, _a) {
    var type = _a.type, contentWrapperHeight = _a.contentWrapperHeight, isUnfolded = _a.isUnfolded;
    return ({
        "root": __assign({}, (function () {
            switch (type) {
                case "largeScreen":
                    return {};
                case "smallScreen":
                    return {
                        "overflow": "hidden",
                        "transition": "height 300ms",
                        "height": isUnfolded ? contentWrapperHeight : 0,
                        "backgroundColor": theme.colors.useCases.surfaces.background,
                        "display": "flex",
                        "alignItems": "center",
                        "opacity": "0.94",
                    };
            }
        })()),
        "overline": {
            "position": "absolute",
            "height": 1,
            "top": 0,
            "width": "100%",
            "transition": "background-color 300ms",
            "backgroundColor": isUnfolded
                ? theme.colors.useCases.typography.textSecondary
                : undefined,
        },
        "contentWrapper": __assign({ "display": "flex", "justifyContent": "start" }, (function () {
            switch (type) {
                case "largeScreen":
                    return {
                        "flexDirection": "row",
                    };
                case "smallScreen":
                    return {
                        "alignItems": "flex-start",
                        "flexDirection": "column",
                        "padding": theme.spacing({
                            "rightLeft": "".concat(theme.paddingRightLeft, "px"),
                            "topBottom": "".concat(theme.spacing(3), "px"),
                        }),
                    };
            }
        })()),
        "linkRoot": __assign({}, (function () {
            switch (type) {
                case "largeScreen":
                    return {};
                case "smallScreen":
                    return __assign({ "alignItems": "flex-start", "paddingRight": theme.spacing(3) }, theme.spacing.topBottom("margin", "".concat(theme.spacing(2), "px")));
            }
        })()),
        "link": __assign({}, (function () {
            switch (type) {
                case "largeScreen":
                    return {};
                case "smallScreen":
                    return {
                        "paddingLeft": 0,
                    };
            }
        })()),
    });
});
//# sourceMappingURL=GlHeaderLinks.js.map