"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("../../Utilities");
var index_1 = require("../FocusTrapZone/index");
var Panel_types_1 = require("./Panel.types");
var Layer_1 = require("../Layer/Layer");
var Overlay_1 = require("../../Overlay");
var Popup_1 = require("../../Popup");
var Button_1 = require("../../Button");
var Styling_1 = require("../../Styling");
var stylesImport = require("./Panel.scss");
var styles = stylesImport;
var theme = Styling_1.getTheme();
var Panel = /** @class */ (function (_super) {
    tslib_1.__extends(Panel, _super);
    function Panel(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isFooterSticky: false,
            isOpen: false,
            isAnimating: false,
            id: Utilities_1.getId('Panel')
        };
        return _this;
    }
    Panel.prototype.componentDidMount = function () {
        this._events.on(window, 'resize', this._updateFooterPosition);
        if (this.props.isOpen) {
            this.open();
        }
    };
    Panel.prototype.componentWillReceiveProps = function (newProps) {
        if (newProps.isOpen !== this.state.isOpen) {
            if (newProps.isOpen) {
                this.open();
            }
            else {
                this.dismiss();
            }
        }
    };
    Panel.prototype.render = function () {
        var _a = this.props, _b = _a.className, className = _b === void 0 ? '' : _b, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isLightDismiss = _a.isLightDismiss, isHiddenOnDismiss = _a.isHiddenOnDismiss, layerProps = _a.layerProps, type = _a.type, customWidth = _a.customWidth, _c = _a.onLightDismissClick, onLightDismissClick = _c === void 0 ? this._onPanelClick : _c, _d = _a.onRenderNavigation, onRenderNavigation = _d === void 0 ? this._onRenderNavigation : _d, _e = _a.onRenderHeader, onRenderHeader = _e === void 0 ? this._onRenderHeader : _e, _f = _a.onRenderBody, onRenderBody = _f === void 0 ? this._onRenderBody : _f, _g = _a.onRenderFooter, onRenderFooter = _g === void 0 ? this._onRenderFooter : _g;
        var _h = this.state, isOpen = _h.isOpen, isAnimating = _h.isAnimating, id = _h.id;
        var isLeft = type === Panel_types_1.PanelType.smallFixedNear ? true : false;
        var isRTL = Utilities_1.getRTL();
        var isOnRightSide = isRTL ? isLeft : !isLeft;
        var headerTextId = id + '-headerText';
        var customWidthStyles = (type === Panel_types_1.PanelType.custom) ? { width: customWidth } : {};
        var renderProps = tslib_1.__assign({}, this.props, { componentId: id });
        if (!isOpen && !isAnimating && !isHiddenOnDismiss) {
            return null;
        }
        var overlay;
        if (isBlocking && isOpen) {
            overlay = (React.createElement(Overlay_1.Overlay, { className: Utilities_1.css(styles.overlay, isOpen && isAnimating && Styling_1.AnimationClassNames.fadeIn200, !isOpen && isAnimating && Styling_1.AnimationClassNames.fadeOut200), isDarkThemed: false, onClick: isLightDismiss ? onLightDismissClick : undefined }));
        }
        return (React.createElement(Layer_1.Layer, tslib_1.__assign({}, layerProps),
            React.createElement(Popup_1.Popup, { role: 'dialog', ariaLabelledBy: headerText && headerTextId, onDismiss: this.dismiss, className: Utilities_1.css(!isOpen && !isAnimating && isHiddenOnDismiss && styles.hiddenPanel) },
                React.createElement("div", { className: Utilities_1.css('ms-Panel', styles.root, className, 
                    // because the RTL animations are not being used, we need to set a class
                    isOpen && ('is-open ' + styles.rootIsOpen), type === Panel_types_1.PanelType.smallFluid && ('ms-Panel--smFluid ' + styles.rootIsSmallFluid), type === Panel_types_1.PanelType.smallFixedNear && ('ms-Panel--smLeft ' + styles.rootIsSmallLeft), type === Panel_types_1.PanelType.smallFixedFar && ('ms-Panel--sm ' + styles.rootIsSmall), type === Panel_types_1.PanelType.medium && ('ms-Panel--md ' + styles.rootIsMedium), (type === Panel_types_1.PanelType.large || type === Panel_types_1.PanelType.largeFixed) && ('ms-Panel--lg ' + styles.rootIsLarge), type === Panel_types_1.PanelType.largeFixed && ('ms-Panel--fixed ' + styles.rootIsFixed), type === Panel_types_1.PanelType.extraLarge && ('ms-Panel--xl ' + styles.rootIsXLarge), type === Panel_types_1.PanelType.custom && ('ms-Panel--custom ' + styles.rootIsCustom), hasCloseButton && ('ms-Panel--hasCloseButton ' + styles.rootHasCloseButton), !isOpen && !isAnimating && isHiddenOnDismiss && styles.hiddenPanel) },
                    overlay,
                    React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Panel-main', styles.main, isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideRightIn40, isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideLeftIn40, !isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideLeftOut40, !isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideRightOut40), style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isLightDismiss || isHiddenOnDismiss, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector },
                        React.createElement("div", { className: Utilities_1.css('ms-Panel-commands'), "data-is-visible": true }, onRenderNavigation(renderProps, this._onRenderNavigation)),
                        React.createElement("div", { className: Utilities_1.css('ms-Panel-contentInner', styles.contentInner) },
                            onRenderHeader(renderProps, this._onRenderHeader),
                            onRenderBody(renderProps, this._onRenderBody),
                            onRenderFooter(renderProps, this._onRenderFooter)))))));
    };
    Panel.prototype.open = function () {
        var _this = this;
        if (!this.state.isOpen) {
            this.setState({
                isOpen: true,
                isAnimating: true
            }, function () {
                _this._async.setTimeout(_this._onTransitionComplete, 200);
            });
        }
    };
    Panel.prototype.dismiss = function () {
        var _this = this;
        if (this.state.isOpen) {
            this.setState({
                isOpen: false,
                isAnimating: true
            }, function () {
                _this._async.setTimeout(_this._onTransitionComplete, 200);
            });
            if (this.props.onDismiss) {
                this.props.onDismiss();
            }
        }
    };
    Panel.prototype._onRenderNavigation = function (props) {
        var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton;
        if (hasCloseButton) {
            return (React.createElement("div", { className: Utilities_1.css('ms-Panel-navigation', styles.navigation) },
                React.createElement(Button_1.IconButton, { styles: {
                        root: {
                            height: 'auto',
                            width: '44px',
                            color: theme.palette.neutralSecondary,
                            fontSize: Styling_1.IconFontSizes.large,
                        },
                        rootHovered: {
                            color: theme.palette.neutralPrimary
                        }
                    }, className: Utilities_1.css('ms-Panel-closeButton ms-PanelAction-close'), onClick: this._onPanelClick, ariaLabel: closeButtonAriaLabel, "data-is-visible": true, iconProps: { iconName: 'Cancel' } })));
        }
        return null;
    };
    Panel.prototype._onRenderHeader = function (props) {
        var headerText = props.headerText, componentId = props.componentId, _a = props.headerClassName, headerClassName = _a === void 0 ? '' : _a;
        if (headerText) {
            return (React.createElement("div", { className: Utilities_1.css('ms-Panel-header', styles.header) },
                React.createElement("p", { className: Utilities_1.css('ms-Panel-headerText', styles.headerText, headerClassName), id: componentId + '-headerText', role: 'heading' }, headerText)));
        }
        return null;
    };
    Panel.prototype._onRenderBody = function (props) {
        var contentClass = Utilities_1.css('ms-Panel-content', styles.content, props.isFooterAtBottom && styles.contentGrow);
        return (React.createElement("div", { ref: this._resolveRef('_content'), className: contentClass }, props.children));
    };
    Panel.prototype._onRenderFooter = function (props) {
        var isFooterSticky = this.state.isFooterSticky;
        var _a = this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a;
        if (onRenderFooterContent) {
            return (React.createElement("div", { className: Utilities_1.css('ms-Panel-footer', styles.footer, isFooterSticky && styles.footerIsSticky) },
                React.createElement("div", { className: Utilities_1.css('ms-Panel-footerInner', styles.footerInner) }, onRenderFooterContent())));
        }
        return null;
    };
    Panel.prototype._updateFooterPosition = function () {
        var _content = this._content;
        if (_content) {
            var height = _content.clientHeight;
            var innerHeight_1 = _content.scrollHeight;
            this.setState({
                isFooterSticky: height < innerHeight_1 ? true : false
            });
        }
    };
    Panel.prototype._onPanelClick = function () {
        this.dismiss();
    };
    Panel.prototype._onTransitionComplete = function () {
        this.setState({
            isAnimating: false
        });
        if (!this.state.isOpen && this.props.onDismissed) {
            this.props.onDismissed();
        }
    };
    Panel.defaultProps = {
        isHiddenOnDismiss: false,
        isOpen: false,
        isBlocking: true,
        hasCloseButton: true,
        type: Panel_types_1.PanelType.smallFixedFar,
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Panel.prototype, "dismiss", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Panel.prototype, "_onRenderNavigation", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Panel.prototype, "_onRenderHeader", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Panel.prototype, "_onRenderBody", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Panel.prototype, "_onRenderFooter", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Panel.prototype, "_onPanelClick", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Panel.prototype, "_onTransitionComplete", null);
    return Panel;
}(Utilities_1.BaseComponent));
exports.Panel = Panel;
//# sourceMappingURL=Panel.js.map