"use strict";
exports.__esModule = true;
exports.HeaderMenu = exports.cnHeaderMenu = void 0;
var tslib_1 = require("tslib");
// @ts-nocheck
require("./HeaderMenu.css");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var IconOpenInNew_1 = require("../../../icons/IconOpenInNew/IconOpenInNew");
var bem_1 = require("../../../utils/bem");
var Button_1 = require("../../Button/Button");
var Picture_1 = require("../../Picture/Picture");
var PortalWithTheme_1 = require("../../PortalWithTheme/PortalWithTheme");
var Theme_1 = require("../../Theme/Theme");
exports.cnHeaderMenu = (0, bem_1.cn)('HeaderMenu');
var HeaderMenu = function (_a) {
    var items = _a.items, className = _a.className, onHover = _a.onHover, onBlur = _a.onBlur, _b = _a.container, container = _b === void 0 ? window.document.body : _b, hoverState = _a.hoverState, onClick = _a.onClick, inverted = _a.inverted;
    // const { locale } = useIntl();
    var theme = (0, Theme_1.useTheme)().theme;
    var _c = (0, tslib_1.__read)(react_1["default"].useState(false), 2), hovered = _c[0], setHovered = _c[1];
    var timer = react_1["default"].useRef(null);
    var mouseEnterHandler = function () {
        onHover();
        setHovered(true);
        if (timer.current) {
            clearTimeout(timer.current);
        }
    };
    var mouseLeaveHandler = function () {
        timer.current = setTimeout(function () {
            setHovered(false);
            onBlur();
        }, 500);
    };
    var setParams = function (_a) {
        var externalLink = _a.externalLink, targetBlank = _a.targetBlank, nodeUrl = _a.nodeUrl;
        return {
            isLink: !!nodeUrl,
            to: nodeUrl ? nodeUrl !== null && nodeUrl !== void 0 ? nodeUrl : '/404' : null,
            href: externalLink,
            target: targetBlank ? '_blank' : null
        };
    };
    return (react_1["default"].createElement("nav", { className: (0, exports.cnHeaderMenu)({ hovered: hovered }, [className]) },
        react_1["default"].createElement("ul", { className: (0, exports.cnHeaderMenu)('List') }, items &&
            items.map(function (_a, index) {
                var title = _a.title, nodeUrl = _a.nodeUrl, externalLink = _a.externalLink, subItems = _a.items, label = _a.label, targetBlank = _a.targetBlank;
                var tagWrapperAttrs = setParams({ externalLink: externalLink, nodeUrl: nodeUrl, targetBlank: targetBlank });
                return (react_1["default"].createElement("li", { className: (0, exports.cnHeaderMenu)('Item', { subItems: !!subItems }), key: (0, exports.cnHeaderMenu)('Item', { index: index }), onMouseEnter: function () { return mouseEnterHandler(subItems === null || subItems === void 0 ? void 0 : subItems.length); }, onMouseLeave: function () { return mouseLeaveHandler(); } },
                    react_1["default"].createElement(Button_1.Button, (0, tslib_1.__assign)({ inverted: inverted, className: (0, exports.cnHeaderMenu)('Link', {}), view: "transparent", as: "a", label: title, size: "s" }, tagWrapperAttrs, { onClick: onClick, badge: label
                            ? {
                                text: label.value,
                                inverted: !label.isInverted,
                                color: label.labelColor
                            }
                            : null })),
                    subItems && (react_1["default"].createElement("ul", { className: (0, exports.cnHeaderMenu)('SubList') }, subItems.map(function (_a, index) {
                        var title = _a.title, nodeUrl = _a.nodeUrl, externalLink = _a.externalLink, items = _a.items, targetBlank = _a.targetBlank;
                        var tagWrapperAttrs = setParams({
                            externalLink: externalLink,
                            nodeUrl: nodeUrl,
                            targetBlank: targetBlank
                        });
                        if (items && items.length > 0) {
                            return (react_1["default"].createElement("li", { className: (0, exports.cnHeaderMenu)('SubItem', {
                                    column: true
                                }), key: (0, exports.cnHeaderMenu)('SubItem', { index: index }) },
                                react_1["default"].createElement("ul", { className: (0, exports.cnHeaderMenu)('SubItemList') }, items.map(function (_a, index) {
                                    var title = _a.title, nodeUrl = _a.nodeUrl, externalLink = _a.externalLink, logo = _a.logo, targetBlank = _a.targetBlank;
                                    var tagWrapperAttrs = setParams({
                                        externalLink: externalLink,
                                        nodeUrl: nodeUrl,
                                        targetBlank: targetBlank
                                    });
                                    return (react_1["default"].createElement("li", { className: (0, exports.cnHeaderMenu)('SubItem'), key: (0, exports.cnHeaderMenu)('SubItem', {
                                            index: index
                                        }) }, !externalLink && !!nodeUrl ? (react_1["default"].createElement(Button_1.Button, (0, tslib_1.__assign)({ className: (0, exports.cnHeaderMenu)('Link'), view: "transparent", as: "a", label: title, size: "s" }, tagWrapperAttrs, { onClick: onClick }))) : (react_1["default"].createElement(Button_1.Button, (0, tslib_1.__assign)({ className: (0, exports.cnHeaderMenu)('Link'), view: "ghost", as: "a", label: title, size: "s" }, tagWrapperAttrs, { href: externalLink, iconRight: IconOpenInNew_1.IconOpenInNew, iconLeft: function () { return logo && react_1["default"].createElement(Picture_1.Picture, (0, tslib_1.__assign)({}, logo)); } })))));
                                }))));
                        }
                        return (react_1["default"].createElement("li", { className: (0, exports.cnHeaderMenu)('SubItem'), key: (0, exports.cnHeaderMenu)('SubItem', { index: index }) },
                            react_1["default"].createElement(Button_1.Button, (0, tslib_1.__assign)({ className: (0, exports.cnHeaderMenu)('Link', {}), view: "transparent", as: "a", label: title, size: "s" }, tagWrapperAttrs, { onClick: onClick }))));
                    })))));
            })),
        hoverState && (react_1["default"].createElement(PortalWithTheme_1.PortalWithTheme, { preset: theme, container: container, className: (0, exports.cnHeaderMenu)('Overlay') },
            react_1["default"].createElement("div", { className: (0, exports.cnHeaderMenu)('Backdrop'), "aria-label": "Overlay" })))));
};
exports.HeaderMenu = HeaderMenu;
