import { __assign, __read } from "tslib";
// @ts-nocheck
import './HeaderMenu.css';
import React from 'react';
import { IconOpenInNew } from '../../../icons/IconOpenInNew/IconOpenInNew';
import { cn } from '../../../utils/bem';
import { Button } from '../../Button/Button';
import { Picture } from '../../Picture/Picture';
import { PortalWithTheme } from '../../PortalWithTheme/PortalWithTheme';
import { useTheme } from '../../Theme/Theme';
export var cnHeaderMenu = cn('HeaderMenu');
export 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 = useTheme().theme;
    var _c = __read(React.useState(false), 2), hovered = _c[0], setHovered = _c[1];
    var timer = React.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.createElement("nav", { className: cnHeaderMenu({ hovered: hovered }, [className]) },
        React.createElement("ul", { className: 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.createElement("li", { className: cnHeaderMenu('Item', { subItems: !!subItems }), key: cnHeaderMenu('Item', { index: index }), onMouseEnter: function () { return mouseEnterHandler(subItems === null || subItems === void 0 ? void 0 : subItems.length); }, onMouseLeave: function () { return mouseLeaveHandler(); } },
                    React.createElement(Button, __assign({ inverted: inverted, className: 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.createElement("ul", { className: 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.createElement("li", { className: cnHeaderMenu('SubItem', {
                                    column: true
                                }), key: cnHeaderMenu('SubItem', { index: index }) },
                                React.createElement("ul", { className: 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.createElement("li", { className: cnHeaderMenu('SubItem'), key: cnHeaderMenu('SubItem', {
                                            index: index
                                        }) }, !externalLink && !!nodeUrl ? (React.createElement(Button, __assign({ className: cnHeaderMenu('Link'), view: "transparent", as: "a", label: title, size: "s" }, tagWrapperAttrs, { onClick: onClick }))) : (React.createElement(Button, __assign({ className: cnHeaderMenu('Link'), view: "ghost", as: "a", label: title, size: "s" }, tagWrapperAttrs, { href: externalLink, iconRight: IconOpenInNew, iconLeft: function () { return logo && React.createElement(Picture, __assign({}, logo)); } })))));
                                }))));
                        }
                        return (React.createElement("li", { className: cnHeaderMenu('SubItem'), key: cnHeaderMenu('SubItem', { index: index }) },
                            React.createElement(Button, __assign({ className: cnHeaderMenu('Link', {}), view: "transparent", as: "a", label: title, size: "s" }, tagWrapperAttrs, { onClick: onClick }))));
                    })))));
            })),
        hoverState && (React.createElement(PortalWithTheme, { preset: theme, container: container, className: cnHeaderMenu('Overlay') },
            React.createElement("div", { className: cnHeaderMenu('Backdrop'), "aria-label": "Overlay" })))));
};
