var _a;
import { __decorate, __extends, __metadata } from "tslib";
import { Component, Prop, Watch } from 'vue-property-decorator';
import BaseComponent from '../BaseComponent';
import { MessageBarType } from './MessageBar.types';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { Icon } from '../Icon';
import { IconButton } from '../Button';
var getClassNames = classNamesFunction();
var ICON_MAP = (_a = {},
    _a[MessageBarType.info] = 'Info',
    _a[MessageBarType.warning] = 'Info',
    _a[MessageBarType.error] = 'ErrorBadge',
    _a[MessageBarType.blocked] = 'Blocked2',
    _a[MessageBarType.severeWarning] = 'Warning',
    _a[MessageBarType.success] = 'Completed',
    _a);
var MessageBarBase = /** @class */ (function (_super) {
    __extends(MessageBarBase, _super);
    function MessageBarBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            expandSingleLine: _this.expandSingleLine,
        };
        return _this;
    }
    Object.defineProperty(MessageBarBase.prototype, "classNames", {
        get: function () {
            var _a = this, theme = _a.theme, className = _a.className, messageBarType = _a.messageBarType, actions = _a.actions, truncated = _a.truncated, isMultiline = _a.isMultiline;
            var expandSingleLine = this.state.expandSingleLine;
            return getClassNames(this.styles, {
                theme: theme,
                messageBarType: messageBarType || MessageBarType.info,
                onDismiss: this.$listeners.dismiss !== undefined,
                actions: actions !== undefined,
                truncated: truncated,
                isMultiline: isMultiline,
                expandSingleLine: expandSingleLine,
                className: className,
            });
        },
        enumerable: false,
        configurable: true
    });
    MessageBarBase.prototype.onExpandSingleLine = function (value) {
        this.state.expandSingleLine = value;
    };
    MessageBarBase.prototype.onClick = function () {
        this.state.expandSingleLine = !this.state.expandSingleLine;
    };
    MessageBarBase.prototype.render = function (h) {
        var _a = this, theme = _a.theme, classNames = _a.classNames, messageBarType = _a.messageBarType, actions = _a.actions, truncated = _a.truncated, isMultiline = _a.isMultiline;
        var $iconSpan = h('div', { class: classNames.iconContainer }, [
            h('Icon', {
                class: classNames.icon,
                attrs: { iconName: ICON_MAP[messageBarType] },
            }),
        ]);
        var $innerText = h('div', { class: classNames.text, attrs: { role: 'status' } }, [
            h('span', { class: classNames.innerText }, [
                h('span', this.$slots.default),
            ]),
        ]);
        var $expandSingleLine = (!actions && truncated) && h('div', { class: classNames.expandSingleLine }, [
            h(IconButton, {
                class: classNames.expand,
                attrs: {
                    iconProps: { iconName: this.state.expandSingleLine ? 'DoubleChevronUp' : 'DoubleChevronDown' },
                },
                nativeOn: {
                    click: this.onClick,
                },
            }),
        ]);
        var $singleLine = (!isMultiline && this.$slots.actions) && h('div', { class: classNames.actions }, this.$slots.actions);
        var $dismissDiv = (this.$listeners.dismiss && isMultiline) && h(IconButton, { class: classNames.dismissal, attrs: { iconProps: { iconName: 'Clear' } } });
        var $dismissSingleLine = (this.$listeners.dismiss && !isMultiline) && h('div', {
            class: classNames.dismissSingleLine,
        }, [
            h(IconButton, {
                class: classNames.dismissal,
                attrs: {
                    iconProps: { iconName: 'Clear' },
                },
            }),
        ]);
        var $multiLine = (isMultiline && this.$slots.actions) && h('div', { class: classNames.actions }, this.$slots.actions);
        return h('div', { style: { background: theme.semanticColors.bodyBackground } }, [
            h('div', { class: classNames.root }, [
                h('div', { class: classNames.content }, [
                    $iconSpan,
                    $innerText,
                    $expandSingleLine,
                    $singleLine,
                    $dismissDiv,
                    $dismissSingleLine,
                ]),
                $multiLine,
            ]),
        ]);
    };
    __decorate([
        Prop({ type: Number, default: MessageBarType.info }),
        __metadata("design:type", Number)
    ], MessageBarBase.prototype, "messageBarType", void 0);
    __decorate([
        Prop({ type: Boolean, default: true }),
        __metadata("design:type", Boolean)
    ], MessageBarBase.prototype, "isMultiline", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], MessageBarBase.prototype, "actions", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], MessageBarBase.prototype, "truncated", void 0);
    __decorate([
        Prop({ type: Boolean, default: true }),
        __metadata("design:type", Boolean)
    ], MessageBarBase.prototype, "expandSingleLine", void 0);
    __decorate([
        Watch('expandSingleLine'),
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Boolean]),
        __metadata("design:returntype", void 0)
    ], MessageBarBase.prototype, "onExpandSingleLine", null);
    MessageBarBase = __decorate([
        Component({
            components: { Icon: Icon, IconButton: IconButton },
        })
    ], MessageBarBase);
    return MessageBarBase;
}(BaseComponent));
export { MessageBarBase };
//# sourceMappingURL=MessageBar.base.js.map