var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
define(["require", "exports", "react", "../../Utilities", "../FocusTrapZone/index", "./Panel.Props", "../Layer/Layer", "../../Overlay", "../../Popup", "../../Button", "./Panel.scss"], function (require, exports, React, Utilities_1, index_1, Panel_Props_1, Layer_1, Overlay_1, Popup_1, Button_1, Panel_scss_1) {
    "use strict";
    // Animation class constants.
    var FADE_IN_200 = 'ms-u-fadeIn200';
    var FADE_OUT_200 = 'ms-u-fadeOut200';
    var SLIDE_LEFT_IN_40 = 'ms-u-slideLeftIn40';
    var SLIDE_LEFT_OUT_40 = 'ms-u-slideLeftOut40';
    var SLIDE_RIGHT_IN_40 = 'ms-u-slideRightIn40';
    var SLIDE_RIGHT_OUT_40 = 'ms-u-slideRightOut40';
    var Panel = (function (_super) {
        __extends(Panel, _super);
        function Panel(props) {
            var _this = _super.call(this, props) || this;
            _this._onPanelClick = _this._onPanelClick.bind(_this);
            _this._onPanelRef = _this._onPanelRef.bind(_this);
            _this.state = {
                isOpen: !!props.isOpen,
                isAnimatingOpen: props.isOpen,
                isAnimatingClose: false,
                id: Utilities_1.getId('Panel')
            };
            return _this;
        }
        Panel.prototype.componentDidMount = function () {
            var _this = this;
            if (this.state.isOpen) {
                this._async.setTimeout(function () {
                    _this.setState({
                        isAnimatingOpen: false
                    });
                }, 2000);
            }
        };
        Panel.prototype.componentWillReceiveProps = function (newProps) {
            if (newProps.isOpen !== this.state.isOpen) {
                this.setState({
                    isOpen: true,
                    isAnimatingOpen: newProps.isOpen ? true : false,
                    isAnimatingClose: newProps.isOpen ? false : true
                });
            }
        };
        Panel.prototype.render = function () {
            var _a = this.props, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, closeButtonAriaLabel = _a.closeButtonAriaLabel, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, _c = _a.headerClassName, headerClassName = _c === void 0 ? '' : _c, headerText = _a.headerText, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isLightDismiss = _a.isLightDismiss, layerProps = _a.layerProps, type = _a.type;
            var _d = this.state, isOpen = _d.isOpen, isAnimatingOpen = _d.isAnimatingOpen, isAnimatingClose = _d.isAnimatingClose, id = _d.id;
            var isLeft = type === Panel_Props_1.PanelType.smallFixedNear ? true : false;
            var isRTL = Utilities_1.getRTL();
            var isOnRightSide = isRTL ? isLeft : !isLeft;
            var headerTextId = id + '-headerText';
            var pendingCommandBarContent = '';
            if (!isOpen) {
                return null;
            }
            var header;
            if (headerText) {
                header = React.createElement("p", { className: Utilities_1.css('ms-Panel-headerText', Panel_scss_1.default.headerText, headerClassName), id: headerTextId }, headerText);
            }
            var closeButton;
            if (hasCloseButton) {
                closeButton = (React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Panel-closeButton ms-PanelAction-close', Panel_scss_1.default.closeButton), onClick: this._onPanelClick, "aria-label": closeButtonAriaLabel, "data-is-visible": true, icon: 'Cancel' }));
            }
            var overlay;
            if (isBlocking) {
                overlay = (React.createElement(Overlay_1.Overlay, { className: Utilities_1.css(Panel_scss_1.default.overlay, (_e = {},
                        _e[FADE_IN_200] = isAnimatingOpen,
                        _e[FADE_OUT_200] = isAnimatingClose,
                        _e)), isDarkThemed: false, onClick: isLightDismiss ? this._onPanelClick : null }));
            }
            return (React.createElement(Layer_1.Layer, __assign({}, layerProps),
                React.createElement(Popup_1.Popup, { role: 'dialog', ariaLabelledBy: headerText && headerTextId, onDismiss: this.props.onDismiss },
                    React.createElement("div", { ref: this._onPanelRef, className: Utilities_1.css('ms-Panel', Panel_scss_1.default.root, className, (_f = {},
                            // because the RTL animations are not being used, we need to set a class
                            _f['is-open ' + Panel_scss_1.default.rootIsOpen] = isOpen,
                            _f['ms-Panel--smFluid ' + Panel_scss_1.default.rootIsSmallFluid] = type === Panel_Props_1.PanelType.smallFluid,
                            _f['ms-Panel--smLeft ' + Panel_scss_1.default.rootIsSmallLeft] = type === Panel_Props_1.PanelType.smallFixedNear,
                            _f['ms-Panel--sm ' + Panel_scss_1.default.rootIsSmall] = type === Panel_Props_1.PanelType.smallFixedFar,
                            _f['ms-Panel--md ' + Panel_scss_1.default.rootIsMedium] = type === Panel_Props_1.PanelType.medium,
                            _f['ms-Panel--lg ' + Panel_scss_1.default.rootIsLarge] = type === Panel_Props_1.PanelType.large || type === Panel_Props_1.PanelType.largeFixed,
                            _f['ms-Panel--fixed ' + Panel_scss_1.default.rootIsFixed] = type === Panel_Props_1.PanelType.largeFixed,
                            _f['ms-Panel--xl ' + Panel_scss_1.default.rootIsXLarge] = type === Panel_Props_1.PanelType.extraLarge,
                            _f['ms-Panel--hasCloseButton ' + Panel_scss_1.default.rootHasCloseButton] = hasCloseButton,
                            _f)) },
                        overlay,
                        React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Panel-main', Panel_scss_1.default.main, (_g = {},
                                _g[SLIDE_RIGHT_IN_40] = isAnimatingOpen && !isOnRightSide,
                                _g[SLIDE_LEFT_IN_40] = isAnimatingOpen && isOnRightSide,
                                _g[SLIDE_LEFT_OUT_40] = isAnimatingClose && !isOnRightSide,
                                _g[SLIDE_RIGHT_OUT_40] = isAnimatingClose && isOnRightSide,
                                _g)), elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isLightDismiss, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector },
                            React.createElement("div", { className: Utilities_1.css('ms-Panel-commands'), "data-is-visible": true },
                                pendingCommandBarContent,
                                closeButton),
                            React.createElement("div", { className: Utilities_1.css('ms-Panel-contentInner', Panel_scss_1.default.contentInner) },
                                header,
                                React.createElement("div", { className: Utilities_1.css('ms-Panel-content') }, children)))))));
            var _e, _f, _g;
        };
        Panel.prototype.componentDidUpdate = function (prevProps, prevState) {
            if (prevState.isAnimatingClose === false &&
                this.state.isAnimatingClose === true &&
                this.props.onDismiss) {
                this.props.onDismiss();
            }
        };
        Panel.prototype.dismiss = function () {
            if (this.state.isOpen) {
                this.setState({
                    isAnimatingOpen: false,
                    isAnimatingClose: true
                });
            }
        };
        Panel.prototype._onPanelClick = function () {
            this.dismiss();
        };
        Panel.prototype._onPanelRef = function (ref) {
            if (ref) {
                this._events.on(ref, 'animationend', this._onAnimationEnd);
            }
            else {
                this._events.off();
            }
        };
        Panel.prototype._onAnimationEnd = function (ev) {
            if (ev.animationName.indexOf('In') > -1) {
                this.setState({
                    isOpen: true,
                    isAnimatingOpen: false
                });
            }
            if (ev.animationName.indexOf('Out') > -1) {
                this.setState({
                    isOpen: false,
                    isAnimatingClose: false
                });
                if (this.props.onDismissed) {
                    this.props.onDismissed();
                }
            }
        };
        return Panel;
    }(Utilities_1.BaseComponent));
    Panel.defaultProps = {
        isOpen: false,
        isBlocking: true,
        hasCloseButton: true,
        type: Panel_Props_1.PanelType.smallFixedFar,
    };
    exports.Panel = Panel;
});

//# sourceMappingURL=Panel.js.map
