import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, DelayedRender, css, autobind, getId } from '../../Utilities';
import { IconButton } from '../../Button';
import { Icon } from '../../Icon';
import { MessageBarType } from './MessageBar.types';
import * as stylesImport from './MessageBar.scss';
var styles = stylesImport;
var MessageBar = /** @class */ (function (_super) {
    tslib_1.__extends(MessageBar, _super);
    function MessageBar(props) {
        var _this = _super.call(this, props) || this;
        _this.ICON_MAP = (_a = {},
            _a[MessageBarType.info] = 'Info',
            _a[MessageBarType.warning] = 'Info',
            _a[MessageBarType.error] = 'ErrorBadge',
            _a[MessageBarType.blocked] = 'Blocked2',
            _a[MessageBarType.remove] = 'Blocked',
            _a[MessageBarType.severeWarning] = 'Warning',
            _a[MessageBarType.success] = 'Completed',
            _a);
        _this.state = {
            labelId: getId('MessageBar'),
            showContent: false,
            expandSingleLine: false,
        };
        return _this;
        var _a;
    }
    MessageBar.prototype.render = function () {
        var isMultiline = this.props.isMultiline;
        return isMultiline ? this._renderMultiLine() : this._renderSingleLine();
    };
    MessageBar.prototype._getActionsDiv = function () {
        if (this.props.actions) {
            return (React.createElement("div", { className: this.props.isMultiline ?
                    ('ms-MessageBar-actions ' + styles.actions) :
                    ('ms-MessageBar-actionsSingleLine ' + styles.actionsSingleLine) }, this.props.actions));
        }
        return null;
    };
    MessageBar.prototype._getClassName = function () {
        return css(this.props.className, 'ms-MessageBar', styles.root, (_a = {},
            _a['ms-MessageBar ' + styles.root] = this.props.messageBarType === MessageBarType.info,
            _a['ms-MessageBar--error ' + styles.rootIsError] = this.props.messageBarType === MessageBarType.error,
            _a['ms-MessageBar--blocked ' + styles.rootIsBlocked] = (this.props.messageBarType === MessageBarType.blocked) ||
                (this.props.messageBarType === MessageBarType.remove),
            _a['ms-MessageBar--severeWarning ' + styles.rootIsSevereWarning] = this.props.messageBarType === MessageBarType.severeWarning,
            _a['ms-MessageBar--success ' + styles.rootIsSuccess] = this.props.messageBarType === MessageBarType.success,
            _a['ms-MessageBar--warning ' + styles.rootIsWarning] = this.props.messageBarType === MessageBarType.warning,
            _a));
        var _a;
    };
    MessageBar.prototype._getDismissDiv = function () {
        if (this.props.onDismiss) {
            return (React.createElement(IconButton, { disabled: false, className: css('ms-MessageBar-dismissal', styles.dismissal), onClick: this.props.onDismiss, iconProps: { iconName: 'Clear' }, ariaLabel: this.props.dismissButtonAriaLabel }));
        }
        return null;
    };
    MessageBar.prototype._getDismissSingleLine = function () {
        if (this.props.onDismiss) {
            return (React.createElement("div", { className: css('ms-MessageBar-dismissSingleLine', styles.dismissSingleLine) }, this._getDismissDiv()));
        }
        return null;
    };
    MessageBar.prototype._getExpandSingleLine = function () {
        if (!this.props.actions && this.props.truncated) {
            return (React.createElement("div", { className: css('ms-MessageBar-expandSingleLine', styles.expandSingleLine) },
                React.createElement(IconButton, { disabled: false, className: css('ms-MessageBar-expand', styles.expand), onClick: this._onClick, iconProps: { iconName: this.state.expandSingleLine ? 'DoubleChevronUp' : 'DoubleChevronDown' }, ariaLabel: this.props.dismissButtonAriaLabel })));
        }
        return null;
    };
    MessageBar.prototype._getIconSpan = function () {
        return (React.createElement("div", { className: css('ms-MessageBar-icon', styles.icon) },
            React.createElement(Icon, { iconName: this.ICON_MAP[this.props.messageBarType] })));
    };
    MessageBar.prototype._renderMultiLine = function () {
        return (React.createElement("div", { className: css(this._getClassName(), 'ms-MessageBar-multiline', styles.multiLine, this.props.onDismiss && styles.dismissalMultiLine), role: 'status', "aria-live": this._getAnnouncementPriority() },
            React.createElement("div", { className: css(styles.content, 'ms-MessageBar-content') },
                this._getIconSpan(),
                this._renderInnerText(),
                this._getDismissDiv()),
            this._getActionsDiv()));
    };
    MessageBar.prototype._renderSingleLine = function () {
        return (React.createElement("div", { className: css(this._getClassName(), 'ms-MessageBar-singleline', styles.singleLine, this.props.onDismiss && 'ms-MessageBar-dismissalSingleLine', this.props.truncated && 'ms-MessageBar-expandingSingleLine', this.props.truncated && styles.expandingSingleLine) },
            React.createElement("div", { className: css(styles.content, 'ms-MessageBar-content') },
                this._getIconSpan(),
                this._renderInnerText(),
                this._getExpandSingleLine(),
                this._getDismissSingleLine()),
            this._getActionsDiv()));
    };
    MessageBar.prototype._renderInnerText = function () {
        return (React.createElement("div", { className: css('ms-MessageBar-text', styles.text, this.props.actions && styles.multiLineWithActions, !this.props.onDismiss && styles.noDismissButton, this.state.expandSingleLine && styles.expandSingleLine), id: this.state.labelId },
            React.createElement("span", { className: css('ms-MessageBar-innerText ' + styles.innerText), role: 'status', "aria-live": this._getAnnouncementPriority() },
                React.createElement(DelayedRender, null,
                    React.createElement("span", null, this.props.children)))));
    };
    MessageBar.prototype._getAnnouncementPriority = function () {
        switch (this.props.messageBarType) {
            case MessageBarType.blocked:
            case MessageBarType.error:
            case MessageBarType.severeWarning:
                return 'assertive';
        }
        return 'polite';
    };
    MessageBar.prototype._onClick = function (ev) {
        this.setState({ expandSingleLine: !this.state.expandSingleLine });
    };
    MessageBar.defaultProps = {
        messageBarType: MessageBarType.info,
        onDismiss: undefined,
        isMultiline: true,
    };
    tslib_1.__decorate([
        autobind
    ], MessageBar.prototype, "_onClick", null);
    return MessageBar;
}(BaseComponent));
export { MessageBar };
//# sourceMappingURL=MessageBar.js.map