import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, autobind, getId, inputProperties, getNativeProps } from '../../Utilities';
import { Label } from '../../Label';
import { customizable } from '../../Utilities';
import { getClassNames } from './Toggle.classNames';
var Toggle = /** @class */ (function (_super) {
    tslib_1.__extends(Toggle, _super);
    function Toggle(props) {
        var _this = _super.call(this, props) || this;
        _this._warnMutuallyExclusive({
            checked: 'defaultChecked'
        });
        _this.state = {
            isChecked: !!(props.checked || props.defaultChecked)
        };
        _this._id = props.id || getId('Toggle');
        return _this;
    }
    Object.defineProperty(Toggle.prototype, "checked", {
        /**
         * Gets the current checked state of the toggle.
         */
        get: function () {
            return this.state.isChecked;
        },
        enumerable: true,
        configurable: true
    });
    Toggle.prototype.componentWillReceiveProps = function (newProps) {
        if (newProps.checked !== undefined) {
            this.setState({
                isChecked: !!newProps.checked // convert null to false
            });
        }
    };
    Toggle.prototype.render = function () {
        // This control is using an input element for more universal accessibility support.
        // Previously a button and the aria-pressed attribute were used. This technique works well with Narrator + Edge and NVDA + FireFox.
        // However, JAWS and VoiceOver did not announce anything when the toggle was checked or unchecked.
        // In the future when more screenreaders support aria-pressed it would be a good idea to change this control back to using it as it is
        // more semantically correct.
        var _a = this.props, className = _a.className, theme = _a.theme, customStyles = _a.styles, disabled = _a.disabled, label = _a.label, offAriaLabel = _a.offAriaLabel, offText = _a.offText, onAriaLabel = _a.onAriaLabel, onText = _a.onText;
        var isChecked = this.state.isChecked;
        var stateText = isChecked ? onText : offText;
        var ariaLabel = isChecked ? onAriaLabel : offAriaLabel;
        var toggleNativeProps = getNativeProps(this.props, inputProperties, ['defaultChecked']);
        var classNames = getClassNames(theme, customStyles, className, disabled, isChecked);
        return (React.createElement("div", { className: classNames.root },
            label && (React.createElement(Label, { htmlFor: this._id, className: classNames.label }, label)),
            React.createElement("div", { className: classNames.container },
                React.createElement("button", tslib_1.__assign({}, toggleNativeProps, { className: classNames.pill, disabled: disabled, id: this._id, type: 'button', ref: this._resolveRef('_toggleButton'), "aria-disabled": disabled, "aria-pressed": isChecked, "aria-label": ariaLabel ? ariaLabel : label, "data-is-focusable": true, onChange: this._noop, onClick: this._onClick }),
                    React.createElement("div", { className: classNames.thumb })),
                stateText && (React.createElement(Label, { htmlFor: this._id, className: classNames.text }, stateText)))));
    };
    Toggle.prototype.focus = function () {
        if (this._toggleButton) {
            this._toggleButton.focus();
        }
    };
    Toggle.prototype._onClick = function (ev) {
        var _a = this.props, disabled = _a.disabled, checked = _a.checked, onChanged = _a.onChanged, onClick = _a.onClick;
        var isChecked = this.state.isChecked;
        if (!disabled) {
            // Only update the state if the user hasn't provided it.
            if (checked === undefined) {
                this.setState({
                    isChecked: !isChecked
                });
            }
            if (onChanged) {
                onChanged(!isChecked);
            }
            if (onClick) {
                onClick(ev);
            }
        }
    };
    Toggle.prototype._noop = function () {
        /* no-op */
    };
    tslib_1.__decorate([
        autobind
    ], Toggle.prototype, "_onClick", null);
    Toggle = tslib_1.__decorate([
        customizable('Toggle', ['theme'])
    ], Toggle);
    return Toggle;
}(BaseComponent));
export { Toggle };
//# sourceMappingURL=Toggle.js.map