"use strict";
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 React = require("react");
var Utilities_1 = require("../../Utilities");
var Button_1 = require("../../Button");
var MessageBar_Props_1 = require("./MessageBar.Props");
var MessageBar_scss_1 = require("./MessageBar.scss");
var MessageBar = (function (_super) {
    __extends(MessageBar, _super);
    function MessageBar(props) {
        var _this = _super.call(this, props) || this;
        _this.ICON_MAP = (_a = {},
            _a[MessageBar_Props_1.MessageBarType.info] = 'Info',
            _a[MessageBar_Props_1.MessageBarType.warning] = 'Info',
            _a[MessageBar_Props_1.MessageBarType.error] = 'ErrorBadge',
            _a[MessageBar_Props_1.MessageBarType.blocked] = 'Blocked',
            _a[MessageBar_Props_1.MessageBarType.remove] = 'Blocked',
            _a[MessageBar_Props_1.MessageBarType.severeWarning] = 'Warning',
            _a[MessageBar_Props_1.MessageBarType.success] = 'Completed',
            _a);
        _this.state = {
            labelId: Utilities_1.getId('MessageBar'),
            showContent: false
        };
        return _this;
        var _a;
    }
    MessageBar.prototype.render = function () {
        var isMultiline = this.props.isMultiline;
        return isMultiline ? this._renderMultiLine() : this._renderSingleLine();
    };
    MessageBar.prototype.componentDidMount = function () {
        var _this = this;
        /**
         * Live regions need an update to announce content.
         */
        this._mountTimeout = setTimeout(function () {
            _this.setState({ showContent: true });
        }, 10);
    };
    MessageBar.prototype.componentWillUnmount = function () {
        if (this._mountTimeout) {
            clearTimeout(this._mountTimeout);
        }
    };
    MessageBar.prototype._getActionsDiv = function () {
        if (this.props.actions) {
            return React.createElement("div", { className: this.props.isMultiline ?
                    ('ms-MessageBar-actions ' + MessageBar_scss_1.default.actions) :
                    ('ms-MessageBar-actionsOneline ' + MessageBar_scss_1.default.actionsOneline) }, this.props.actions);
        }
        return null;
    };
    MessageBar.prototype._getClassName = function () {
        return Utilities_1.css(this.props.className, 'ms-MessageBar', MessageBar_scss_1.default.root, (_a = {},
            _a['ms-MessageBar ' + MessageBar_scss_1.default.root] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.info,
            _a['ms-MessageBar--error ' + MessageBar_scss_1.default.rootIsError] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.error,
            _a['ms-MessageBar--blocked ' + MessageBar_scss_1.default.rootIsBlocked] = (this.props.messageBarType === MessageBar_Props_1.MessageBarType.blocked) ||
                (this.props.messageBarType === MessageBar_Props_1.MessageBarType.remove),
            _a['ms-MessageBar--severeWarning ' + MessageBar_scss_1.default.rootIsSevereWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.severeWarning,
            _a['ms-MessageBar--success ' + MessageBar_scss_1.default.rootIsSuccess] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.success,
            _a['ms-MessageBar--warning ' + MessageBar_scss_1.default.rootIsWarning] = this.props.messageBarType === MessageBar_Props_1.MessageBarType.warning,
            _a));
        var _a;
    };
    MessageBar.prototype._getDismissDiv = function () {
        if (this.props.onDismiss != null) {
            return React.createElement(Button_1.Button, { disabled: false, className: Utilities_1.css('ms-MessageBar-dismissal', MessageBar_scss_1.default.dismissal), buttonType: Button_1.ButtonType.icon, onClick: this.props.onDismiss, icon: 'Cancel', ariaLabel: this.props.dismissButtonAriaLabel });
        }
        return null;
    };
    MessageBar.prototype._getIconSpan = function () {
        return (React.createElement("div", { className: Utilities_1.css('ms-MessageBar-icon', MessageBar_scss_1.default.icon) },
            React.createElement("i", { className: "ms-Icon ms-Icon--" + this.ICON_MAP[this.props.messageBarType] })));
    };
    MessageBar.prototype._getInnerTextClassName = function () {
        return this.props.onDismiss || this.props.actions ?
            'ms-MessageBar-innerTextPadding ' + MessageBar_scss_1.default.innerTextPadding : 'ms-MessageBar-innerText ' + MessageBar_scss_1.default.innerText;
    };
    MessageBar.prototype._renderMultiLine = function () {
        return (React.createElement("div", { className: this._getClassName() + ' ms-MessageBar-multiline ' + MessageBar_scss_1.default.multiline, role: 'status', "aria-live": this._getAnnouncementPriority() },
            React.createElement("div", { className: Utilities_1.css('ms-MessageBar-content', MessageBar_scss_1.default.content) },
                this._getIconSpan(),
                React.createElement("div", { className: Utilities_1.css('ms-MessageBar-actionables', MessageBar_scss_1.default.actionables) },
                    React.createElement("div", { className: Utilities_1.css('ms-MessageBar-text', MessageBar_scss_1.default.text), id: this.state.labelId },
                        React.createElement("span", { className: this._getInnerTextClassName() }, this.state.showContent && this.props.children)),
                    this._getActionsDiv(),
                    this._getDismissDiv()))));
    };
    MessageBar.prototype._renderSingleLine = function () {
        return (React.createElement("div", { className: this._getClassName() + ' ms-MessageBar-singleline ' + MessageBar_scss_1.default.singleline, role: 'status', "aria-live": this._getAnnouncementPriority() },
            React.createElement("div", { className: Utilities_1.css('ms-MessageBar-content', MessageBar_scss_1.default.content) },
                this._getIconSpan(),
                React.createElement("div", { className: Utilities_1.css('ms-MessageBar-actionables', MessageBar_scss_1.default.actionables) },
                    React.createElement("div", { className: Utilities_1.css('ms-MessageBar-text', MessageBar_scss_1.default.text), id: this.state.labelId },
                        React.createElement("span", { className: this._getInnerTextClassName() }, this.state.showContent && this.props.children))),
                this._getActionsDiv(),
                React.createElement("div", { className: Utilities_1.css('ms-MessageBar-dismissalOneline', MessageBar_scss_1.default.dismissalOneline) }, this._getDismissDiv()))));
    };
    MessageBar.prototype._getAnnouncementPriority = function () {
        switch (this.props.messageBarType) {
            case MessageBar_Props_1.MessageBarType.blocked:
            case MessageBar_Props_1.MessageBarType.error:
            case MessageBar_Props_1.MessageBarType.severeWarning:
                return 'assertive';
        }
        return 'polite';
    };
    return MessageBar;
}(React.Component));
MessageBar.defaultProps = {
    messageBarType: MessageBar_Props_1.MessageBarType.info,
    onDismiss: null,
    isMultiline: true,
};
exports.MessageBar = MessageBar;

//# sourceMappingURL=MessageBar.js.map
