import { __assign } from "tslib";
import React, { useContext, useState } from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
import Overlay from '../overlay';
import Button from '../button/button';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
var Modal = function (props) {
    var _a;
    var _b = props.visible, visible = _b === void 0 ? false : _b, _c = props.width, width = _c === void 0 ? 520 : _c, _d = props.centered, centered = _d === void 0 ? false : _d, _e = props.closable, closable = _e === void 0 ? true : _e, _f = props.unmountOnClose, unmountOnClose = _f === void 0 ? true : _f, _g = props.maskType, maskType = _g === void 0 ? 'default' : _g, _h = props.maskClosable, maskClosable = _h === void 0 ? true : _h, _j = props.confirmText, confirmText = _j === void 0 ? 'OK' : _j, _k = props.cancelText, cancelText = _k === void 0 ? 'Cancel' : _k, _l = props.confirmLoading, confirmLoading = _l === void 0 ? false : _l, _m = props.animation, animation = _m === void 0 ? 'slide' : _m, _o = props.zIndex, zIndex = _o === void 0 ? 1000 : _o, onConfirm = props.onConfirm, onCancel = props.onCancel, top = props.top, header = props.header, footer = props.footer, afterClose = props.afterClose, confirmButtonProps = props.confirmButtonProps, cancelButtonProps = props.cancelButtonProps, className = props.className, children = props.children, style = props.style, maskStyle = props.maskStyle, headerStyle = props.headerStyle, bodyStyle = props.bodyStyle, footerStyle = props.footerStyle, customisedCls = props.prefixCls;
    var _p = useState(visible), modalVisible = _p[0], setModalVisible = _p[1];
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('modal', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className, (_a = {}, _a[prefixCls + "_centered"] = centered, _a));
    var renderFooter = function () {
        if (React.isValidElement(footer)) {
            return footer;
        }
        else if (footer === null) {
            return null;
        }
        else {
            return (React.createElement("div", { className: prefixCls + "__footer", style: footerStyle },
                React.createElement(Button, __assign({ onClick: onCancel, className: prefixCls + "__footer-btn" }, cancelButtonProps), cancelText),
                React.createElement(Button, __assign({ loading: confirmLoading, onClick: onConfirm, btnType: "primary", className: prefixCls + "__footer-btn" }, confirmButtonProps), confirmText)));
        }
    };
    return (React.createElement(Overlay, { onEnter: function () { return setModalVisible(true); }, onExit: function () { return setModalVisible(false); }, zIndex: zIndex, type: maskType, unmountOnExit: unmountOnClose, isShow: visible, onExited: afterClose, clickCallback: function (e) {
            maskClosable && onCancel ? onCancel(e) : undefined;
        }, style: maskStyle },
        React.createElement("div", { className: cls, style: { top: top } },
            React.createElement("div", { style: __assign({ width: width }, style) },
                React.createElement(CSSTransition, { appear: true, in: modalVisible, classNames: prefixCls + "__content_" + animation, timeout: 0 },
                    React.createElement("div", { className: prefixCls + "__content", onClick: function (e) { return e.stopPropagation(); } },
                        closable && (React.createElement("div", { role: "button", className: prefixCls + "__close-btn", onClick: onCancel }, "\u2715")),
                        header && (React.createElement("div", { className: prefixCls + "__header", style: headerStyle },
                            React.createElement("div", { className: prefixCls + "__title" }, header))),
                        React.createElement("div", { className: prefixCls + "__body", style: bodyStyle }, children),
                        renderFooter()))))));
};
Modal.displayName = 'Modal';
export default Modal;
//# sourceMappingURL=index.js.map