import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css, divProperties, getId, getNativeProps, getRTL, createRef, elementContains } from '../../Utilities';
import { FocusTrapZone } from '../FocusTrapZone/index';
import { PanelType } from './Panel.types';
import { Layer } from '../Layer/Layer';
import { Overlay } from '../../Overlay';
import { Popup } from '../../Popup';
import { IconButton } from '../../Button';
import { AnimationClassNames, getTheme, IconFontSizes } from '../../Styling';
import * as stylesImport from './Panel.scss';
var styles = stylesImport;
var theme = getTheme();
var Panel = /** @class */ (function (_super) {
    tslib_1.__extends(Panel, _super);
    function Panel(props) {
        var _this = _super.call(this, props) || this;
        _this._panel = createRef();
        _this._content = createRef();
        _this.dismiss = function () {
            if (_this.state.isOpen) {
                _this.setState({
                    isOpen: false,
                    isAnimating: true
                }, function () {
                    _this._async.setTimeout(_this._onTransitionComplete, 200);
                });
                if (_this.props.onDismiss) {
                    _this.props.onDismiss();
                }
            }
        };
        _this._onRenderNavigation = function (props) {
            var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton;
            if (hasCloseButton) {
                return (React.createElement("div", { className: css('ms-Panel-navigation', styles.navigation) },
                    React.createElement(IconButton, { styles: {
                            root: {
                                height: 'auto',
                                width: '44px',
                                color: theme.palette.neutralSecondary,
                                fontSize: IconFontSizes.large
                            },
                            rootHovered: {
                                color: theme.palette.neutralPrimary
                            }
                        }, className: css('ms-Panel-closeButton ms-PanelAction-close'), onClick: _this._onPanelClick, ariaLabel: closeButtonAriaLabel, "data-is-visible": true, iconProps: { iconName: 'Cancel' } })));
            }
            return null;
        };
        _this._onRenderHeader = function (props, defaultRender, headerTextId) {
            var headerText = props.headerText, _a = props.headerClassName, headerClassName = _a === void 0 ? '' : _a;
            if (headerText) {
                return (React.createElement("div", { className: css('ms-Panel-header', styles.header) },
                    React.createElement("p", { className: css('ms-Panel-headerText', styles.headerText, headerClassName), id: headerTextId, role: "heading" }, headerText)));
            }
            return null;
        };
        _this._onRenderBody = function (props) {
            var contentClass = css('ms-Panel-content', styles.content, props.isFooterAtBottom && styles.contentGrow);
            return (React.createElement("div", { ref: _this._content, className: contentClass, "data-is-scrollable": true }, props.children));
        };
        _this._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: css('ms-Panel-footer', styles.footer, isFooterSticky && styles.footerIsSticky) },
                    React.createElement("div", { className: css('ms-Panel-footerInner', styles.footerInner) }, onRenderFooterContent())));
            }
            return null;
        };
        _this._onPanelClick = function () {
            _this.dismiss();
        };
        _this._onTransitionComplete = function () {
            _this.setState({
                isAnimating: false
            });
            if (!_this.state.isOpen && _this.props.onDismissed) {
                _this.props.onDismissed();
            }
        };
        _this._warnDeprecations({
            ignoreExternalFocusing: 'focusTrapZoneProps',
            forceFocusInsideTrap: 'focusTrapZoneProps',
            firstFocusableSelector: 'focusTrapZoneProps'
        });
        _this.state = {
            isFooterSticky: false,
            isOpen: false,
            isAnimating: false,
            id: getId('Panel')
        };
        return _this;
    }
    Panel.prototype.componentDidMount = function () {
        this._events.on(window, 'resize', this._updateFooterPosition);
        if (this._shouldListenForOuterClick(this.props)) {
            this._events.on(document.body, 'click', this._dismissOnOuterClick, true);
        }
        if (this.props.isOpen) {
            this.open();
        }
    };
    Panel.prototype.componentDidUpdate = function (previousProps) {
        var shouldListenOnOuterClick = this._shouldListenForOuterClick(this.props);
        var previousShouldListenOnOuterClick = this._shouldListenForOuterClick(previousProps);
        if (shouldListenOnOuterClick && !previousShouldListenOnOuterClick) {
            this._events.on(document.body, 'click', this._dismissOnOuterClick, true);
        }
        else if (!shouldListenOnOuterClick && previousShouldListenOnOuterClick) {
            this._events.off(document.body, 'click', this._dismissOnOuterClick, true);
        }
    };
    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, focusTrapZoneProps = _a.focusTrapZoneProps, 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 === PanelType.smallFixedNear ? true : false;
        var isRTL = getRTL();
        var isOnRightSide = isRTL ? isLeft : !isLeft;
        var headerTextId = headerText && id + '-headerText';
        var customWidthStyles = type === PanelType.custom ? { width: customWidth } : {};
        var nativeProps = getNativeProps(this.props, divProperties);
        if (!isOpen && !isAnimating && !isHiddenOnDismiss) {
            return null;
        }
        var overlay;
        if (isBlocking && isOpen) {
            overlay = (React.createElement(Overlay, { className: css(styles.overlay, isOpen && isAnimating && AnimationClassNames.fadeIn200, !isOpen && isAnimating && AnimationClassNames.fadeOut200), isDarkThemed: false, onClick: isLightDismiss ? onLightDismissClick : undefined }));
        }
        var header = onRenderHeader(this.props, this._onRenderHeader, headerTextId);
        return (React.createElement(Layer, tslib_1.__assign({}, layerProps),
            React.createElement(Popup, { role: "dialog", ariaLabelledBy: header ? headerTextId : undefined, onDismiss: this.dismiss, className: css(!isOpen && !isAnimating && isHiddenOnDismiss && styles.hiddenPanel) },
                React.createElement("div", tslib_1.__assign({}, nativeProps, { ref: this._panel, className: 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 === PanelType.smallFluid && 'ms-Panel--smFluid ' + styles.rootIsSmallFluid, type === PanelType.smallFixedNear && 'ms-Panel--smLeft ' + styles.rootIsSmallLeft, type === PanelType.smallFixedFar && 'ms-Panel--sm ' + styles.rootIsSmall, type === PanelType.medium && 'ms-Panel--md ' + styles.rootIsMedium, (type === PanelType.large || type === PanelType.largeFixed) && 'ms-Panel--lg ' + styles.rootIsLarge, type === PanelType.largeFixed && 'ms-Panel--fixed ' + styles.rootIsFixed, type === PanelType.extraLarge && 'ms-Panel--xl ' + styles.rootIsXLarge, type === PanelType.custom && 'ms-Panel--custom ' + styles.rootIsCustom, hasCloseButton && 'ms-Panel--hasCloseButton ' + styles.rootHasCloseButton, !isOpen && !isAnimating && isHiddenOnDismiss && styles.hiddenPanel) }),
                    overlay,
                    React.createElement(FocusTrapZone, tslib_1.__assign({ ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector }, focusTrapZoneProps, { className: css('ms-Panel-main', styles.main, isOpen && isAnimating && !isOnRightSide && AnimationClassNames.slideRightIn40, isOpen && isAnimating && isOnRightSide && AnimationClassNames.slideLeftIn40, !isOpen && isAnimating && !isOnRightSide && AnimationClassNames.slideLeftOut40, !isOpen && isAnimating && isOnRightSide && AnimationClassNames.slideRightOut40, focusTrapZoneProps ? focusTrapZoneProps.className : undefined), style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: focusTrapZoneProps && !focusTrapZoneProps.isClickableOutsideFocusTrap ? false : true }),
                        React.createElement("div", { className: css('ms-Panel-commands'), "data-is-visible": true }, onRenderNavigation(this.props, this._onRenderNavigation)),
                        React.createElement("div", { className: css('ms-Panel-contentInner', styles.contentInner) },
                            header,
                            onRenderBody(this.props, this._onRenderBody),
                            onRenderFooter(this.props, 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._shouldListenForOuterClick = function (props) {
        return !!props.isBlocking && !!props.isOpen;
    };
    Panel.prototype._updateFooterPosition = function () {
        var _content = this._content.current;
        if (_content) {
            var height = _content.clientHeight;
            var innerHeight_1 = _content.scrollHeight;
            this.setState({
                isFooterSticky: height < innerHeight_1 ? true : false
            });
        }
    };
    Panel.prototype._dismissOnOuterClick = function (ev) {
        var panel = this._panel.current;
        if (this.state.isOpen && panel) {
            if (!elementContains(panel, ev.target)) {
                if (this.props.onOuterClick) {
                    this.props.onOuterClick();
                    ev.preventDefault();
                }
                else {
                    this.dismiss();
                }
            }
        }
    };
    Panel.defaultProps = {
        isHiddenOnDismiss: false,
        isOpen: false,
        isBlocking: true,
        hasCloseButton: true,
        type: PanelType.smallFixedFar
    };
    return Panel;
}(BaseComponent));
export { Panel };
//# sourceMappingURL=Panel.js.map