import { __assign, __rest } from "tslib";
import React, { useContext, useState, useRef } from 'react';
import classNames from 'classnames';
import { MenuContext } from './menu-context';
import { SubMenuContext } from './sub-menu-context';
import { ArrowDown } from '../_utils/components';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import Popup from '../popup';
import CollapseTransition from '../collapse-transition';
var SubMenu = function (props) {
    var _a, _b, _c;
    var index = props.index, title = props.title, disabled = props.disabled, className = props.className, overlayClassName = props.overlayClassName, children = props.children, customisedCls = props.prefixCls, otherProps = __rest(props, ["index", "title", "disabled", "className", "overlayClassName", "children", "prefixCls"]);
    var menuContext = useContext(MenuContext);
    var mode = menuContext.mode, inlineIndent = menuContext.inlineIndent;
    var _d = useContext(SubMenuContext), _e = _d.level, level = _e === void 0 ? 1 : _e, _onMenuItemClick = _d.onMenuItemClick;
    var _f = useState(false), menuOpen = _f[0], setMenuOpen = _f[1];
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('menu-sub', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className);
    var subMenuCls = classNames(prefixCls + "__list", (_a = {},
        _a[prefixCls + "__list_open"] = menuOpen,
        _a[prefixCls + "__list_popup"] = mode !== 'inline',
        _a));
    var nonRootSubMenu = index === null || index === void 0 ? void 0 : index.includes('-');
    var rightPopupMenu = mode === 'vertical' || (mode === 'horizontal' && nonRootSubMenu);
    var arrowCls = rightPopupMenu
        ? prefixCls + "__arrow " + prefixCls + "__arrow_right"
        : classNames(prefixCls + "__arrow", (_b = {},
            _b[prefixCls + "__arrow_reverse"] = menuOpen,
            _b));
    var menuItemCls = (configContext.prefixCls ? configContext.prefixCls : 'ty') + "-menu-item";
    var titleCls = classNames(menuItemCls, prefixCls + "__title", (_c = {},
        _c[menuItemCls + "_disabled"] = disabled,
        _c[menuItemCls + "_active"] = index ? menuContext.index.startsWith(index) : false,
        _c));
    var titleRef = useRef(null);
    var handleOnClick = function (e) {
        e.preventDefault();
        !disabled && mode === 'inline' && setMenuOpen(!menuOpen);
    };
    var timerRef = useRef(undefined);
    var handleMouse = function (e, toggle) {
        e.preventDefault();
        var timer = timerRef.current;
        timer && window.clearTimeout(timer);
        timerRef.current = window.setTimeout(function () {
            setMenuOpen(toggle);
        }, 200);
    };
    var handleOnMouseEnter = function (e) {
        !disabled && mode !== 'inline' && handleMouse(e, true);
    };
    var handleOnMouseLeave = function (e) {
        mode !== 'inline' && handleMouse(e, false);
    };
    var onMenuItemClick = function () {
        if (mode !== 'inline') {
            setMenuOpen(false);
            _onMenuItemClick && _onMenuItemClick();
        }
    };
    var renderChildrenList = function () {
        var minWidth = undefined;
        var titleNode = titleRef.current;
        if (titleNode && !nonRootSubMenu) {
            var _a = window.getComputedStyle(titleNode), marginLeft = _a.marginLeft, marginRight = _a.marginRight;
            minWidth = titleNode.offsetWidth + parseFloat(marginLeft) + parseFloat(marginRight);
        }
        return (React.createElement("ul", { className: subMenuCls, style: { minWidth: minWidth } }, React.Children.map(children, function (child, idx) {
            var childElement = child;
            var displayName = childElement.type.displayName;
            var childProps = {
                index: index + "-" + idx,
            };
            if (displayName === 'MenuItem' ||
                displayName === 'MenuItemGroup' ||
                displayName === 'SubMenu' ||
                displayName === 'MenuDivider') {
                return React.cloneElement(childElement, childProps);
            }
            else {
                console.warn('Menu has a child that is not a MenuItem component.');
                return null;
            }
        })));
    };
    if (mode === 'inline') {
        return (React.createElement(SubMenuContext.Provider, { value: { level: level + 1 } },
            React.createElement("li", __assign({}, otherProps, { role: "menuitem", key: index, className: cls }),
                React.createElement("div", { className: titleCls, style: { paddingLeft: inlineIndent * level }, onClick: handleOnClick },
                    React.createElement("span", null, title),
                    React.createElement("span", { className: arrowCls },
                        React.createElement(ArrowDown, { size: 10 }))),
                React.createElement(CollapseTransition, { isShow: menuOpen }, renderChildrenList()))));
    }
    else {
        return (React.createElement(SubMenuContext.Provider, { value: { onMenuItemClick: onMenuItemClick } },
            React.createElement("li", __assign({}, otherProps, { role: "menuitem", key: index, className: cls, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave }),
                React.createElement(Popup, { flip: false, arrow: false, className: overlayClassName, trigger: "manual", visible: menuOpen, biZoom: rightPopupMenu, placement: rightPopupMenu ? 'right-start' : 'bottom-start', content: renderChildrenList() },
                    React.createElement("div", { ref: titleRef, className: titleCls, onClick: handleOnClick },
                        React.createElement("span", null, title),
                        React.createElement("span", { className: arrowCls },
                            React.createElement(ArrowDown, { size: 10 })))))));
    }
};
SubMenu.displayName = 'SubMenu';
export default SubMenu;
//# sourceMappingURL=sub-menu.js.map