var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import './Modal.scss';
import pipe from '../../Utils/pipe';
import withPortal from '../../Utils/withPortal';
import XIconSvg from '../Icons/XIconSvg';
import renderIfProp from '../../Utils/renderIfProp';
import getPopupPortalRoot from '../../Utils/getPopupPortalRoot';
import onEscape from '../../Utils/Input/onEscape';
var tryFocus = function (ref) {
    if (ref.current &&
        document.activeElement &&
        ref.current !== document.activeElement &&
        !ref.current.contains(document.activeElement)) {
        ref.current.focus();
        return true;
    }
    return false;
};
// Class component so we can use mount and unmount without side effects on unrelated prop changes
var Modal = /** @class */ (function (_super) {
    __extends(Modal, _super);
    function Modal(props) {
        var _this = _super.call(this, props) || this;
        _this.childFocusOnMountRef = React.createRef();
        _this.closeButtonRef = React.createRef();
        return _this;
    }
    Modal.prototype.componentDidMount = function () {
        this.previousActiveElement = document.activeElement;
        // eslint-disable-next-line no-unused-expressions, `try to focus child-specified ref, otherwise try to focus close button`
        tryFocus(this.childFocusOnMountRef) || tryFocus(this.closeButtonRef);
    };
    Modal.prototype.componentWillUnmount = function () {
        if (this.previousActiveElement) {
            this.previousActiveElement.focus();
        }
    };
    Modal.prototype.render = function () {
        var _a = this.props, children = _a.children, className = _a.className, isDark = _a.isDark, onClose = _a.onClose, wrapperClassName = _a.wrapperClassName;
        return (
        // eslint-disable-next-line jsx-a11y/no-static-element-interactions, `Just capturing escape keypresses to close for keyboard accessibility`
        React.createElement("div", { className: [
                wrapperClassName,
                'ddbeb-modal',
                isDark && 'ddbeb-modal--dark',
            ]
                .filter(Boolean)
                .join(' '), onKeyDown: onEscape(onClose) },
            React.createElement("div", { className: "ddbeb-modal__overlay", onClick: onClose }),
            React.createElement("div", { className: [
                    className,
                    'ddbeb-modal__content',
                ]
                    .filter(Boolean)
                    .join(' '), "aria-modal": "true", role: "dialog" },
                React.createElement("button", { className: "ddbeb-modal__close-button qa-modal_close", onClick: onClose, title: "Close Modal", ref: this.closeButtonRef },
                    React.createElement(XIconSvg, { thickness: 10 })),
                typeof children === 'function' ?
                    children(onClose, this.childFocusOnMountRef) :
                    children)));
    };
    return Modal;
}(PureComponent));
Modal.propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.node,
        PropTypes.func,
    ]),
    className: PropTypes.string,
    isDark: PropTypes.bool,
    onClose: PropTypes.func.isRequired,
    isOpen: PropTypes.bool.isRequired,
    wrapperClassName: PropTypes.string,
};
Modal.defaultProps = {
    className: '',
    isDark: false,
    wrapperClassName: '',
};
export var createModal = function (_a) {
    var portalRoot = _a.portalRoot;
    return pipe(withPortal(portalRoot), renderIfProp(function (props) { return props.isOpen; }))(Modal);
};
export default createModal({
    portalRoot: getPopupPortalRoot(),
});
//# sourceMappingURL=Modal.js.map