import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component } from 'react';
import { CSSTransition } from 'react-transition-group';
import Portal from '../portal';
import isBrowser from '../utils/isBrowser';
import { DialogElWrapper, DialogInnerEl } from './DialogEl';
import { openDialog, closeDialog } from './open';
import { addEventListener } from '../utils/component/event-handler';
var TIMEOUT = 300;
var mousePosition = null;
if (isBrowser) {
    addEventListener(document.documentElement, 'click', function (e) {
        if (e.clientX === 0 || e.clientY === 0) {
            return;
        }
        mousePosition = {
            x: e.clientX,
            y: e.clientY,
        };
    }, { capture: true });
}
var Dialog = (function (_super) {
    __extends(Dialog, _super);
    function Dialog(props) {
        var _this = _super.call(this, props) || this;
        _this.lastMousePosition = null;
        _this.onClose = function (e) {
            var onClose = _this.props.onClose;
            onClose && onClose(e);
        };
        _this.onExited = function () {
            var onClosed = _this.props.onClosed;
            _this.setState({
                exiting: false,
            });
            onClosed && onClosed();
        };
        _this.state = {
            prevOpen: props.visible,
            exiting: false,
        };
        return _this;
    }
    Dialog.getDerivedStateFromProps = function (props, _a) {
        var prevOpen = _a.prevOpen;
        if (props.visible === prevOpen) {
            return null;
        }
        if (props.visible) {
            return {
                prevOpen: props.visible,
                exiting: false,
            };
        }
        return {
            prevOpen: props.visible,
            exiting: true,
        };
    };
    Dialog.prototype.render = function () {
        var _a = this.props, visible = _a.visible, closeBtn = _a.closeBtn, style = _a.style, position = _a.position, onOpened = _a.onOpened, onClosed = _a.onClosed, mask = _a.mask, maskClosable = _a.maskClosable, children = _a.children, props = __rest(_a, ["visible", "closeBtn", "style", "position", "onOpened", "onClosed", "mask", "maskClosable", "children"]);
        var exiting = this.state.exiting;
        if (visible) {
            this.lastMousePosition = this.lastMousePosition || mousePosition;
        }
        else {
            this.lastMousePosition = null;
        }
        return (_jsx(Portal, __assign({ visible: visible || exiting, onClose: this.onClose, className: "zent-dialog-r-anchor", closeOnESC: closeBtn, blockPageScroll: true }, { children: _jsx(DialogElWrapper, __assign({ mask: mask, maskClosable: maskClosable, visible: visible, onClose: this.onClose }, { children: _jsx(CSSTransition, __assign({ appear: true, mountOnEnter: true, unmountOnExit: true, in: visible, timeout: TIMEOUT, classNames: "zent-zoom", onEntered: onOpened, onExited: this.onExited }, { children: _jsx(DialogInnerEl, __assign({}, props, { style: style, closeBtn: closeBtn, position: position, mousePosition: this.lastMousePosition }, { children: children }), void 0) }), void 0) }), void 0) }), void 0));
    };
    Dialog.defaultProps = {
        onClose: function () { },
        visible: false,
        className: '',
        style: {},
        position: "auto",
        title: '',
        closeBtn: true,
        mask: true,
        maskClosable: true,
        footer: null,
    };
    Dialog.openDialog = openDialog;
    Dialog.closeDialog = closeDialog;
    return Dialog;
}(Component));
export { Dialog };
export default Dialog;
