import { __assign, __rest } from "tslib";
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import Popup from '../popup';
var Dropdown = function (props) {
    var _a = props.trigger, trigger = _a === void 0 ? 'hover' : _a, _b = props.placement, placement = _b === void 0 ? 'bottom-start' : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.arrow, arrow = _d === void 0 ? false : _d, onVisibleChange = props.onVisibleChange, overlay = props.overlay, className = props.className, children = props.children, customisedCls = props.prefixCls, otherProps = __rest(props, ["trigger", "placement", "disabled", "arrow", "onVisibleChange", "overlay", "className", "children", "prefixCls"]);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('dropdown', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className);
    var _e = useState('visible' in props ? props.visible : false), popupVisible = _e[0], setPopupVisible = _e[1];
    var delayDisplayPopupTimer = useRef(undefined);
    var delayHidePopupTimer = useRef(undefined);
    var displayPopup = useCallback(function () {
        !('visible' in props) && setPopupVisible(true);
        onVisibleChange && onVisibleChange(true);
    }, [props, onVisibleChange]);
    var hidePopup = useCallback(function () {
        !('visible' in props) && setPopupVisible(false);
        onVisibleChange && onVisibleChange(false);
    }, [props, onVisibleChange]);
    var delayHidePopup = useCallback(function () {
        delayHidePopupTimer.current = window.setTimeout(function () {
            hidePopup();
        }, 100);
    }, [hidePopup]);
    var renderOverlay = function () {
        if (!overlay) {
            return null;
        }
        var overlayProps = {
            overlayClassName: cls,
            mode: 'vertical',
            theme: 'light',
            onMouseEnter: function () {
                if (trigger === 'hover') {
                    displayPopup();
                    window.clearTimeout(delayHidePopupTimer.current);
                }
            },
            onMouseLeave: function () {
                if (trigger === 'hover') {
                    delayHidePopup();
                    window.clearTimeout(delayDisplayPopupTimer.current);
                }
            },
            onSelect: function (selectedIndex) {
                var onSelect = overlay.props.onSelect;
                onSelect && onSelect(selectedIndex);
                hidePopup();
            },
        };
        return React.cloneElement(overlay, overlayProps);
    };
    var handleTargetOnMouseEnter = function () {
        if (trigger === 'hover') {
            displayPopup();
            window.clearTimeout(delayHidePopupTimer.current);
        }
    };
    var handleTargetOnMouseLeave = function () {
        if (trigger === 'hover') {
            delayHidePopup();
            window.clearTimeout(delayDisplayPopupTimer.current);
        }
    };
    var handleTargetOnClick = function () {
        if (trigger === 'click') {
            displayPopup();
        }
    };
    useEffect(function () {
        'visible' in props && setPopupVisible(props.visible);
    }, [props]);
    var childrenProps = {
        onMouseEnter: handleTargetOnMouseEnter,
        onMouseLeave: handleTargetOnMouseLeave,
        onClick: handleTargetOnClick,
    };
    React.Children.only(children);
    return (React.createElement(Popup, __assign({}, otherProps, { biZoom: false, arrow: arrow, disabled: disabled, placement: placement, flip: !('placement' in props), trigger: "manual", className: cls, visible: popupVisible, content: renderOverlay() }), React.cloneElement(children, childrenProps)));
};
Dropdown.displayName = 'Dropdown';
export default Dropdown;
//# sourceMappingURL=index.js.map