import * as tslib_1 from "tslib";
import React, { useRef, useEffect, useState } from 'react';
import classnames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import Portal from '../portal';
var defaultProps = {
    prefixCls: 'ty-dropdown',
    placement: 'bottomLeft',
    defaultVisible: false,
};
var updatePosition = function (placement) {
    var overlayPosition = {};
    switch (placement) {
        case 'topLeft':
            overlayPosition.bottom = '100%';
            overlayPosition.left = 0;
            break;
        case 'topCenter':
            overlayPosition.bottom = '100%';
            overlayPosition.left = '50%';
            overlayPosition.transform = 'translateX(-50%)';
            break;
        case 'topRight':
            overlayPosition.bottom = '100%';
            overlayPosition.right = 0;
            break;
        default:
            overlayPosition.top = '100%';
            overlayPosition.left = 0;
            break;
    }
    return overlayPosition;
};
var timeout = null;
var Dropdown = function (props) {
    var overlay = props.overlay, placement = props.placement, prefixCls = props.prefixCls, className = props.className, overlayClassName = props.overlayClassName, style = props.style, overlayStyle = props.overlayStyle, children = props.children;
    var cls = classnames(prefixCls, className);
    var overlayCls = classnames(prefixCls + "__overlay", overlayClassName);
    var containerRef = useRef(null);
    var overlayRef = useRef(null);
    var _a = useState({}), position = _a[0], setPosition = _a[1];
    var _b = useState(('visible' in props) ? props.visible : props.defaultVisible), visible = _b[0], setVisible = _b[1];
    var show = function () {
        clearTimeout(timeout);
        timeout = setTimeout(function () { return setVisible(true); }, 250);
    };
    var hide = function () {
        clearTimeout(timeout);
        timeout = setTimeout(function () { return setVisible(false); }, 150);
    };
    useEffect(function () {
        var updatedStyle = updatePosition(placement);
        setPosition(updatedStyle);
        setVisible(false);
        if (containerRef.current) {
            containerRef.current.addEventListener('mouseenter', show);
            containerRef.current.addEventListener('mouseleave', hide);
        }
        if (overlayRef.current) {
            overlayRef.current.addEventListener('mouseenter', show);
            overlayRef.current.addEventListener('mouseleave', hide);
        }
        return function () {
            if (containerRef.current) {
                containerRef.current.removeEventListener('mouseenter', show);
                containerRef.current.removeEventListener('mouseleave', hide);
            }
            if (overlayRef.current) {
                overlayRef.current.removeEventListener('mouseenter', show);
                overlayRef.current.removeEventListener('mouseleave', hide);
            }
        };
    }, []);
    return (React.createElement("div", { className: cls, style: style },
        React.createElement("div", { ref: containerRef }, children),
        React.createElement(Portal, null,
            React.createElement(CSSTransition, { mountOnEnter: true, in: visible, classNames: prefixCls + "__overlay_slide", timeout: { enter: 0, exit: 300 } },
                React.createElement("div", { ref: overlayRef, className: overlayCls, style: tslib_1.__assign({}, overlayStyle, position) }, overlay)))));
};
Dropdown.defaultProps = defaultProps;
export default Dropdown;
//# sourceMappingURL=index.js.map