import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction, getId, createRef } from '../../Utilities';
import { FocusTrapZone } from '../FocusTrapZone/index';
import { animationDuration, getOverlayStyles } from './Modal.styles';
import { Overlay } from '../../Overlay';
import { Layer } from '../../Layer';
import { Popup } from '../Popup/index';
import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
var getClassNames = classNamesFunction();
var ModalBase = /** @class */ (function (_super) {
    tslib_1.__extends(ModalBase, _super);
    function ModalBase(props) {
        var _this = _super.call(this, props) || this;
        _this._focusTrapZone = createRef();
        _this.state = {
            id: getId('Modal'),
            isOpen: props.isOpen,
            isVisible: props.isOpen
        };
        return _this;
    }
    ModalBase.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(animationDuration) * 1000);
            this.setState({
                isVisible: false
            });
        }
    };
    ModalBase.prototype.componentDidUpdate = function (prevProps, prevState) {
        if (!prevProps.isOpen && !prevState.isVisible) {
            this.setState({
                isVisible: true
            });
        }
    };
    ModalBase.prototype.render = function () {
        var _a = this.props, className = _a.className, containerClassName = _a.containerClassName, 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, styles = _a.styles, subtitleAriaId = _a.subtitleAriaId, theme = _a.theme;
        var _b = this.state, isOpen = _b.isOpen, isVisible = _b.isVisible;
        if (!isOpen) {
            return null;
        }
        var classNames = getClassNames(styles, {
            theme: theme,
            className: className,
            containerClassName: containerClassName,
            isOpen: isOpen,
            isVisible: isVisible
        });
        // @temp tuatology - Will adjust this to be a panel at certain breakpoints
        if (responsiveMode >= ResponsiveMode.small) {
            return (React.createElement(Layer, { onLayerDidMount: onLayerDidMount },
                React.createElement(Popup, { role: isBlocking ? 'alertdialog' : 'dialog', ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss },
                    React.createElement("div", { className: classNames.root },
                        React.createElement(Overlay, { isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, styles: getOverlayStyles }),
                        React.createElement(FocusTrapZone, { componentRef: this._focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap ? isClickableOutsideFocusTrap : !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector }, this.props.children)))));
        }
        return null;
    };
    ModalBase.prototype.focus = function () {
        if (this._focusTrapZone.current) {
            this._focusTrapZone.current.focus();
        }
    };
    // Watch for completed animations and set the state
    ModalBase.prototype._onModalClose = function () {
        this.setState({
            isOpen: false
        });
        // Call the onDismiss callback
        if (this.props.onDismissed) {
            this.props.onDismissed();
        }
    };
    ModalBase.defaultProps = {
        isOpen: false,
        isDarkOverlay: true,
        isBlocking: false,
        className: '',
        containerClassName: ''
    };
    ModalBase = tslib_1.__decorate([
        withResponsiveMode
    ], ModalBase);
    return ModalBase;
}(BaseComponent));
export { ModalBase };
//# sourceMappingURL=Modal.base.js.map