define(["require", "exports", "tslib", "react", "../../Utilities", "../../Button", "../../Icon", "./MessageBar.types", "@uifabric/utilities"], function (require, exports, tslib_1, React, Utilities_1, Button_1, Icon_1, MessageBar_types_1, utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var getClassNames = Utilities_1.classNamesFunction();
    var MessageBarBase = /** @class */ (function (_super) {
        tslib_1.__extends(MessageBarBase, _super);
        function MessageBarBase(props) {
            var _a;
            var _this = _super.call(this, props) || this;
            _this.ICON_MAP = (_a = {},
                _a[MessageBar_types_1.MessageBarType.info] = 'Info',
                _a[MessageBar_types_1.MessageBarType.warning] = 'Info',
                _a[MessageBar_types_1.MessageBarType.error] = 'ErrorBadge',
                _a[MessageBar_types_1.MessageBarType.blocked] = 'Blocked2',
                _a[MessageBar_types_1.MessageBarType.remove] = 'Blocked',
                _a[MessageBar_types_1.MessageBarType.severeWarning] = 'Warning',
                _a[MessageBar_types_1.MessageBarType.success] = 'Completed',
                _a);
            _this._getRegionProps = function () {
                var hasActions = !!_this._getActionsDiv() || !!_this._getDismissDiv();
                var regionProps = {
                    'aria-describedby': _this.state.labelId,
                    role: 'region'
                };
                return hasActions ? regionProps : {};
            };
            _this._onClick = function (ev) {
                _this.setState({ expandSingleLine: !_this.state.expandSingleLine });
            };
            _this.state = {
                labelId: Utilities_1.getId('MessageBar'),
                showContent: false,
                expandSingleLine: false
            };
            return _this;
        }
        MessageBarBase.prototype.render = function () {
            var isMultiline = this.props.isMultiline;
            this._classNames = this._getClassNames();
            return isMultiline ? this._renderMultiLine() : this._renderSingleLine();
        };
        MessageBarBase.prototype._getActionsDiv = function () {
            if (this.props.actions) {
                return React.createElement("div", { className: this._classNames.actions }, this.props.actions);
            }
            return null;
        };
        MessageBarBase.prototype._getDismissDiv = function () {
            var _a = this.props, onDismiss = _a.onDismiss, dismissIconProps = _a.dismissIconProps;
            if (onDismiss) {
                return (React.createElement(Button_1.IconButton, { disabled: false, className: this._classNames.dismissal, onClick: onDismiss, iconProps: dismissIconProps ? dismissIconProps : { iconName: 'Clear' }, ariaLabel: this.props.dismissButtonAriaLabel }));
            }
            return null;
        };
        MessageBarBase.prototype._getDismissSingleLine = function () {
            if (this.props.onDismiss) {
                return React.createElement("div", { className: this._classNames.dismissSingleLine }, this._getDismissDiv());
            }
            return null;
        };
        MessageBarBase.prototype._getExpandSingleLine = function () {
            if (!this.props.actions && this.props.truncated) {
                return (React.createElement("div", { className: this._classNames.expandSingleLine },
                    React.createElement(Button_1.IconButton, { disabled: false, className: this._classNames.expand, onClick: this._onClick, iconProps: { iconName: this.state.expandSingleLine ? 'DoubleChevronUp' : 'DoubleChevronDown' }, ariaLabel: this.props.overflowButtonAriaLabel, "aria-expanded": this.state.expandSingleLine })));
            }
            return null;
        };
        MessageBarBase.prototype._getIconSpan = function () {
            var messageBarIconProps = this.props.messageBarIconProps;
            return (React.createElement("div", { className: this._classNames.iconContainer, "aria-hidden": true }, messageBarIconProps ? (React.createElement(Icon_1.Icon, tslib_1.__assign({}, messageBarIconProps, { className: utilities_1.css(this._classNames.icon, messageBarIconProps.className) }))) : (React.createElement(Icon_1.Icon, { iconName: this.ICON_MAP[this.props.messageBarType], className: this._classNames.icon }))));
        };
        MessageBarBase.prototype._renderMultiLine = function () {
            var theme = this.props.theme;
            return (React.createElement("div", { style: { background: theme.semanticColors.bodyBackground } },
                React.createElement("div", tslib_1.__assign({ className: this._classNames.root }, this._getRegionProps()),
                    React.createElement("div", { className: this._classNames.content },
                        this._getIconSpan(),
                        this._renderInnerText(),
                        this._getDismissDiv()),
                    this._getActionsDiv())));
        };
        MessageBarBase.prototype._renderSingleLine = function () {
            var theme = this.props.theme;
            return (React.createElement("div", { style: { background: theme.semanticColors.bodyBackground } },
                React.createElement("div", tslib_1.__assign({ className: this._classNames.root }, this._getRegionProps()),
                    React.createElement("div", { className: this._classNames.content },
                        this._getIconSpan(),
                        this._renderInnerText(),
                        this._getExpandSingleLine(),
                        this._getActionsDiv(),
                        this._getDismissSingleLine()))));
        };
        MessageBarBase.prototype._renderInnerText = function () {
            var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.htmlElementProperties, ['className']);
            return (React.createElement("div", { className: this._classNames.text, id: this.state.labelId, role: "status", "aria-live": this._getAnnouncementPriority() },
                React.createElement("span", tslib_1.__assign({ className: this._classNames.innerText }, nativeProps),
                    React.createElement(Utilities_1.DelayedRender, null,
                        React.createElement("span", null, this.props.children)))));
        };
        MessageBarBase.prototype._getClassNames = function () {
            var _a = this.props, theme = _a.theme, className = _a.className, messageBarType = _a.messageBarType, onDismiss = _a.onDismiss, actions = _a.actions, truncated = _a.truncated, isMultiline = _a.isMultiline;
            var expandSingleLine = this.state.expandSingleLine;
            return getClassNames(this.props.styles, {
                theme: theme,
                messageBarType: messageBarType || MessageBar_types_1.MessageBarType.info,
                onDismiss: onDismiss !== undefined,
                actions: actions !== undefined,
                truncated: truncated,
                isMultiline: isMultiline,
                expandSingleLine: expandSingleLine,
                className: className
            });
        };
        MessageBarBase.prototype._getAnnouncementPriority = function () {
            switch (this.props.messageBarType) {
                case MessageBar_types_1.MessageBarType.blocked:
                case MessageBar_types_1.MessageBarType.error:
                case MessageBar_types_1.MessageBarType.severeWarning:
                    return 'assertive';
            }
            return 'polite';
        };
        MessageBarBase.defaultProps = {
            messageBarType: MessageBar_types_1.MessageBarType.info,
            onDismiss: undefined,
            isMultiline: true
        };
        return MessageBarBase;
    }(Utilities_1.BaseComponent));
    exports.MessageBarBase = MessageBarBase;
});
//# sourceMappingURL=MessageBar.base.js.map