define(["require", "exports", "tslib", "react", "../../Utilities", "../FocusTrapZone/index", "../../Overlay", "../../Layer", "../Popup/index", "../../utilities/decorators/withResponsiveMode", "./Modal.scss"], function (require, exports, tslib_1, React, Utilities_1, index_1, Overlay_1, Layer_1, index_2, withResponsiveMode_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var Modal = /** @class */ (function (_super) {
        tslib_1.__extends(Modal, _super);
        function Modal(props) {
            var _this = _super.call(this, props) || this;
            _this._focusTrapZone = Utilities_1.createRef();
            _this.state = {
                id: Utilities_1.getId('Modal'),
                isOpen: props.isOpen,
                isVisible: props.isOpen
            };
            return _this;
        }
        Modal.prototype.componentWillReceiveProps = function (newProps) {
            clearTimeout(this._onModalCloseTimer);
            // Opening the dialog
            if (newProps.isOpen) {
                if (!this.state.isOpen) {
                    // First Open
                    this.setState({
                        isOpen: true
                    });
                }
                else {
                    // Reopen during closing
                    this.setState({
                        isVisible: true
                    });
                }
            }
            // Closing the dialog
            if (!newProps.isOpen && this.state.isOpen) {
                this._onModalCloseTimer = this._async.setTimeout(this._onModalClose, parseFloat(styles.duration) * 1000);
                this.setState({
                    isVisible: false
                });
            }
        };
        Modal.prototype.componentDidUpdate = function (prevProps, prevState) {
            if (!prevProps.isOpen && !prevState.isVisible) {
                this.setState({
                    isVisible: true
                });
            }
        };
        Modal.prototype.render = function () {
            var _a = this.props, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isClickableOutsideFocusTrap = _a.isClickableOutsideFocusTrap, isDarkOverlay = _a.isDarkOverlay, onDismiss = _a.onDismiss, onLayerDidMount = _a.onLayerDidMount, responsiveMode = _a.responsiveMode, titleAriaId = _a.titleAriaId, subtitleAriaId = _a.subtitleAriaId;
            var _b = this.state, isOpen = _b.isOpen, isVisible = _b.isVisible;
            var modalClassName = Utilities_1.css('ms-Modal', styles.root, this.props.className, !!isOpen && 'is-open', !!isVisible && styles.rootIsVisible);
            if (!isOpen) {
                return null;
            }
            // @temp tuatology - Will adjust this to be a panel at certain breakpoints
            if (responsiveMode >= withResponsiveMode_1.ResponsiveMode.small) {
                return (React.createElement(Layer_1.Layer, { onLayerDidMount: onLayerDidMount },
                    React.createElement(index_2.Popup, { role: isBlocking ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss },
                        React.createElement("div", { className: modalClassName },
                            React.createElement(Overlay_1.Overlay, { isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss }),
                            React.createElement(index_1.FocusTrapZone, { componentRef: this._focusTrapZone, className: Utilities_1.css('ms-Dialog-main', styles.main, this.props.containerClassName), elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector }, this.props.children)))));
            }
            return null;
        };
        Modal.prototype.focus = function () {
            if (this._focusTrapZone.current) {
                this._focusTrapZone.current.focus();
            }
        };
        // Watch for completed animations and set the state
        Modal.prototype._onModalClose = function () {
            this.setState({
                isOpen: false
            });
            // Call the onDismiss callback
            if (this.props.onDismissed) {
                this.props.onDismissed();
            }
        };
        Modal.defaultProps = {
            isOpen: false,
            isDarkOverlay: true,
            isBlocking: false,
            className: '',
            containerClassName: ''
        };
        Modal = tslib_1.__decorate([
            withResponsiveMode_1.withResponsiveMode
        ], Modal);
        return Modal;
    }(Utilities_1.BaseComponent));
    exports.Modal = Modal;
});
//# sourceMappingURL=Modal.js.map