import React, { useEffect, useRef, useState, useContext } from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { CheckCircle, CloseCircle, InfoCircle, LoadingCircle, WarningCircle, } from '../_utils/components';
var Message = function (props) {
    var type = props.type, icon = props.icon, content = props.content, duration = props.duration, willUnmount = props.willUnmount, extra = props.extra, className = props.className, style = props.style, customisedCls = props.prefixCls;
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('message', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className);
    var ref = useRef(null);
    var _a = useState(true), visible = _a[0], setVisible = _a[1];
    var renderIcon = function () {
        var _a;
        if (React.isValidElement(icon)) {
            return icon;
        }
        else if (typeof type === 'string') {
            switch (type) {
                case 'success':
                    return React.createElement(CheckCircle, { size: 16, className: prefixCls + "__icon" });
                case 'info':
                    return React.createElement(InfoCircle, { size: 16, className: prefixCls + "__icon" });
                case 'warning':
                    return React.createElement(WarningCircle, { size: 16, className: prefixCls + "__icon" });
                case 'error':
                    return React.createElement(CloseCircle, { size: 16, className: prefixCls + "__icon" });
                case 'loading':
                    return (React.createElement(LoadingCircle, { size: 16, className: classNames(prefixCls + "__icon", (_a = {},
                            _a[prefixCls + "__icon_loading"] = type === 'loading',
                            _a)) }));
            }
        }
        return null;
    };
    useEffect(function () {
        var node = ref.current;
        var height = (node && node.offsetHeight) || 0;
        var timer = window.setTimeout(function () {
            setVisible(false);
            willUnmount(height);
        }, duration);
        return function () {
            window.clearTimeout(timer);
        };
    }, [duration, willUnmount]);
    return (React.createElement(CSSTransition, { in: visible, appear: true, timeout: 0, classNames: prefixCls + "_fade-slide" },
        React.createElement("div", { role: "alert", className: cls, style: style, ref: ref },
            renderIcon(),
            React.createElement("span", { className: prefixCls + "__content" }, content),
            extra && React.createElement("div", { className: prefixCls + "__extra" }, extra))));
};
Message.displayName = 'Message';
export default Message;
//# sourceMappingURL=message.js.map