import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import cx from 'classnames';
import focusWithoutScroll from '../utils/dom/focusWithoutScroll';
import Icon from '../icon';
import { getPositionTransformOrigin } from './position';
var DialogInnerEl = (function (_super) {
    __extends(DialogInnerEl, _super);
    function DialogInnerEl() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.dialogEl = null;
        _this.onClickClose = function (e) {
            var onClose = _this.props.onClose;
            if (onClose) {
                onClose(e);
            }
        };
        return _this;
    }
    DialogInnerEl.prototype.componentDidMount = function () {
        this.resetTransformOrigin();
    };
    DialogInnerEl.prototype.componentDidUpdate = function () {
        this.resetTransformOrigin();
    };
    DialogInnerEl.prototype.setTransformOrigin = function (style, origin) {
        ['Webkit', 'Moz', 'Ms', 'ms'].forEach(function (prefix) {
            style[prefix + "TransformOrigin"] = origin;
        });
        style.transformOrigin = origin;
    };
    DialogInnerEl.prototype.resetTransformOrigin = function (props) {
        if (props === void 0) { props = this.props; }
        var mousePosition = props.mousePosition, position = props.position;
        var origin = getPositionTransformOrigin(position, this.dialogEl);
        if (origin === undefined &&
            mousePosition &&
            mousePosition.x >= 0 &&
            mousePosition.y >= 0 &&
            this.dialogEl &&
            this.dialogEl.getBoundingClientRect) {
            var _a = this.dialogEl.getBoundingClientRect(), x = _a.left, y = _a.top;
            origin = mousePosition.x - x + "px " + (mousePosition.y - y) + "px 0";
        }
        if (origin && this.dialogEl) {
            this.setTransformOrigin(this.dialogEl.style, origin);
        }
    };
    DialogInnerEl.prototype.renderHeader = function () {
        var title = this.props.title;
        if (!title) {
            return null;
        }
        title =
            typeof title === 'number' || typeof title === 'string' ? (_jsx("span", __assign({ className: "zent-dialog-r-title-text", "data-zv": 'v10.0.12' }, { children: title }), void 0)) : (title);
        return (_jsx("div", __assign({ className: "zent-dialog-r-header", "data-zv": 'v10.0.12' }, { children: _jsx("div", __assign({ className: "zent-dialog-r-title", "data-zv": 'v10.0.12' }, { children: title }), void 0) }), void 0));
    };
    DialogInnerEl.prototype.render = function () {
        var _this = this;
        var _a = this.props, className = _a.className, closeBtn = _a.closeBtn, footer = _a.footer, style = _a.style, children = _a.children;
        var Header = this.renderHeader();
        var closeBtnCls = cx('zent-dialog-r-close', {
            'zent-dialog-r-has-title': !!Header,
        });
        var Closer = closeBtn && (_jsx("button", __assign({ type: "button", className: closeBtnCls, onClick: this.onClickClose, "data-zv": 'v10.0.12' }, { children: _jsx(Icon, { type: "close" }, void 0) }), void 0));
        var Footer = footer && (_jsx("div", __assign({ className: "zent-dialog-r-footer", "data-zv": 'v10.0.12' }, { children: footer }), void 0));
        return (_jsxs("div", __assign({ className: cx('zent-dialog-r', className, {
                'zent-dialog-r--has-header': !!Header,
                'zent-dialog-r--has-footer': !!Footer,
                'zent-dialog-r--no-close-btn': !Closer,
            }), style: style, ref: function (el) { return (_this.dialogEl = el); }, "data-zv": 'v10.0.12' }, { children: [Closer, Header, _jsx("div", __assign({ className: "zent-dialog-r-body", "data-zv": 'v10.0.12' }, { children: _jsx("div", __assign({ className: "zent-dialog-r-body-content", "data-zv": 'v10.0.12' }, { children: children }), void 0) }), void 0), Footer] }), void 0));
    };
    return DialogInnerEl;
}(Component));
export { DialogInnerEl };
var DialogElWrapper = (function (_super) {
    __extends(DialogElWrapper, _super);
    function DialogElWrapper() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.rootRef = createRef();
        _this.onMaskClick = function (e) {
            if (e.target === e.currentTarget &&
                _this.props.mask &&
                _this.props.maskClosable) {
                _this.props.onClose(e);
            }
        };
        return _this;
    }
    DialogElWrapper.prototype.componentDidMount = function () {
        var activeElement = document.activeElement;
        var dialogNode = this.rootRef.current;
        if (dialogNode !== activeElement &&
            dialogNode &&
            !dialogNode.contains(activeElement)) {
            focusWithoutScroll(dialogNode);
        }
    };
    DialogElWrapper.prototype.render = function () {
        var _a = this.props, mask = _a.mask, visible = _a.visible, children = _a.children;
        return (_jsxs("div", __assign({ ref: this.rootRef, tabIndex: -1, className: "zent-dialog-r-root", "data-zv": 'v10.0.12' }, { children: [visible && mask && _jsx("div", { className: "zent-dialog-r-backdrop", "data-zv": 'v10.0.12' }, void 0), _jsx("div", __assign({ className: "zent-dialog-r-wrap", onClick: this.onMaskClick, "data-zv": 'v10.0.12' }, { children: children }), void 0)] }), void 0));
    };
    return DialogElWrapper;
}(Component));
export { DialogElWrapper };
