"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 BaseButton_scss_1 = require("./BaseButton.scss");
var BaseButton = (function (_super) {
    __extends(BaseButton, _super);
    function BaseButton(props, rootClassName, deprecationMap) {
        var _this = _super.call(this, props, { 'rootProps': null }) || this;
        _this.classNames = {
            base: 'ms-Button',
            variant: '',
            isEnabled: '',
            isDisabled: ''
        };
        _this._labelId = Utilities_1.getId();
        _this._descriptionId = Utilities_1.getId();
        _this._ariaDescriptionId = Utilities_1.getId();
        return _this;
    }
    BaseButton.prototype.render = function () {
        var _a = this.props, description = _a.description, ariaLabel = _a.ariaLabel, ariaDescription = _a.ariaDescription, href = _a.href, disabled = _a.disabled;
        var _b = this, _ariaDescriptionId = _b._ariaDescriptionId, _labelId = _b._labelId, _descriptionId = _b._descriptionId;
        var renderAsAnchor = !!href;
        var tag = renderAsAnchor ? 'a' : 'button';
        var nativeProps = Utilities_1.getNativeProps(Utilities_1.assign({}, this.props.rootProps, this.props), renderAsAnchor ? Utilities_1.anchorProperties : Utilities_1.buttonProperties, [
            'disabled' // Let disabled buttons be focused and styled as disabled.
        ]);
        // Check for ariaDescription, description or aria-describedby in the native props to determine source of aria-describedby
        // otherwise default to null.
        var ariaDescribedBy;
        if (ariaDescription) {
            ariaDescribedBy = _ariaDescriptionId;
        }
        else if (description) {
            ariaDescribedBy = _descriptionId;
        }
        else if (nativeProps['aria-describedby']) {
            ariaDescribedBy = nativeProps['aria-describedby'];
        }
        else {
            ariaDescribedBy = null;
        }
        var buttonProps = Utilities_1.assign(nativeProps, {
            className: Utilities_1.css(BaseButton_scss_1.default.root, this.props.className, this.classNames.base, this.classNames.variant, this.classNames.root, (_c = {
                    'disabled': disabled
                },
                _c[this.classNames.isDisabled] = disabled,
                _c[this.classNames.isEnabled] = !disabled,
                _c)),
            ref: this._resolveRef('_buttonElement'),
            'disabled': disabled,
            'aria-label': ariaLabel,
            'aria-labelledby': ariaLabel ? null : _labelId,
            'aria-describedby': ariaDescribedBy,
            'aria-disabled': disabled
        });
        return this.onRenderContent(tag, buttonProps);
        var _c;
    };
    BaseButton.prototype.focus = function () {
        if (this._buttonElement) {
            this._buttonElement.focus();
        }
    };
    BaseButton.prototype.onRenderContent = function (tag, buttonProps) {
        return React.createElement(tag, buttonProps, React.createElement('div', { className: Utilities_1.css(this.classNames.base + '-flexContainer', BaseButton_scss_1.default.flexContainer, this.classNames.flexContainer) }, this.onRenderIcon(), this.onRenderLabel(), this.onRenderDescription(), this.onRenderAriaDescription(), this.onRenderChildren()));
    };
    BaseButton.prototype.onRenderIcon = function () {
        var icon = this.props.icon;
        return icon ? (React.createElement("span", { className: Utilities_1.css(this.classNames.base + "-icon", this.classNames.icon) },
            React.createElement("i", { className: "ms-Icon ms-Icon--" + icon }))) : (null);
    };
    BaseButton.prototype.onRenderLabel = function () {
        var _a = this.props, children = _a.children, text = _a.text;
        // For backwards compat, we should continue to take in the text content from children.
        if (text === undefined && typeof (children) === 'string') {
            text = children;
        }
        return text && (React.createElement("span", { className: Utilities_1.css(this.classNames.base + "-label", this.classNames.label), id: this._labelId }, text));
    };
    BaseButton.prototype.onRenderChildren = function () {
        var children = this.props.children;
        // If children is just a string, either it or the text will be rendered via onRenderLabel
        // If children is another component, it will be rendered after text
        if (typeof (children) === 'string') {
            return null;
        }
        return children;
    };
    BaseButton.prototype.onRenderDescription = function () {
        var description = this.props.description;
        // ms-Button-description is only shown when the button type is compound.
        // In other cases it will not be displayed.
        return description ? (React.createElement("span", { className: Utilities_1.css(this.classNames.base + "-description", this.classNames.description), id: this._descriptionId }, description)) : (null);
    };
    BaseButton.prototype.onRenderAriaDescription = function () {
        var ariaDescription = this.props.ariaDescription;
        // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,
        // otherwise it will be assigned to descriptionSpan.
        return ariaDescription ? (React.createElement("span", { className: 'ms-u-screenReaderOnly', id: this._ariaDescriptionId }, ariaDescription)) : (null);
    };
    return BaseButton;
}(Utilities_1.BaseComponent));
exports.BaseButton = BaseButton;

//# sourceMappingURL=BaseButton.js.map
