import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction, getId, inputProperties, getNativeProps } from '../../Utilities';
import { Label } from '../../Label';
import { KeytipData } from '../../KeytipData';
var getClassNames = classNamesFunction();
var ToggleBase = /** @class */ (function (_super) {
    tslib_1.__extends(ToggleBase, _super);
    function ToggleBase(props) {
        var _this = _super.call(this, props) || this;
        _this._toggleButton = React.createRef();
        _this._onClick = function (ev) {
            var _a = _this.props, disabled = _a.disabled, checkedProp = _a.checked, onChange = _a.onChange, onChanged = _a.onChanged, onClick = _a.onClick;
            var checked = _this.state.checked;
            if (!disabled) {
                // Only update the state if the user hasn't provided it.
                if (checkedProp === undefined) {
                    _this.setState({
                        checked: !checked
                    });
                }
                if (onChange) {
                    onChange(ev, !checked);
                }
                if (onChanged) {
                    onChanged(!checked);
                }
                if (onClick) {
                    onClick(ev);
                }
            }
        };
        _this._warnMutuallyExclusive({
            checked: 'defaultChecked'
        });
        _this._warnDeprecations({
            onAriaLabel: 'ariaLabel',
            offAriaLabel: undefined,
            onChanged: 'onChange'
        });
        _this.state = {
            checked: !!(props.checked || props.defaultChecked)
        };
        _this._id = props.id || getId('Toggle');
        return _this;
    }
    ToggleBase.getDerivedStateFromProps = function (nextProps, prevState) {
        if (nextProps.checked === undefined) {
            return null;
        }
        return {
            checked: !!nextProps.checked
        };
    };
    Object.defineProperty(ToggleBase.prototype, "checked", {
        /**
         * Gets the current checked state of the toggle.
         */
        get: function () {
            return this.state.checked;
        },
        enumerable: true,
        configurable: true
    });
    ToggleBase.prototype.render = function () {
        var _this = this;
        var _a = this.props, _b = _a.as, RootType = _b === void 0 ? 'div' : _b, className = _a.className, theme = _a.theme, disabled = _a.disabled, keytipProps = _a.keytipProps, label = _a.label, ariaLabel = _a.ariaLabel, onAriaLabel = _a.onAriaLabel, offAriaLabel = _a.offAriaLabel, offText = _a.offText, onText = _a.onText, styles = _a.styles, inlineLabel = _a.inlineLabel;
        var checked = this.state.checked;
        var stateText = checked ? onText : offText;
        var badAriaLabel = checked ? onAriaLabel : offAriaLabel;
        var toggleNativeProps = getNativeProps(this.props, inputProperties, ['defaultChecked']);
        var classNames = getClassNames(styles, {
            theme: theme,
            className: className,
            disabled: disabled,
            checked: checked,
            inlineLabel: inlineLabel,
            onOffMissing: !onText && !offText
        });
        var labelId = this._id + "-label";
        var stateTextId = this._id + "-stateText";
        // The following properties take priority for what Narrator should read:
        // 1. ariaLabel
        // 2. onAriaLabel (if checked) or offAriaLabel (if not checked)
        // 3. label
        // 4. onText (if checked) or offText (if not checked)
        var labelledById = undefined;
        if (!ariaLabel && !badAriaLabel) {
            if (label) {
                labelledById = labelId;
            }
            else if (stateText) {
                labelledById = stateTextId;
            }
        }
        var ariaRole = this.props.role ? this.props.role : 'switch';
        return (React.createElement(RootType, { className: classNames.root, hidden: toggleNativeProps.hidden },
            label && (React.createElement(Label, { htmlFor: this._id, className: classNames.label, id: labelId }, label)),
            React.createElement("div", { className: classNames.container },
                React.createElement(KeytipData, { keytipProps: keytipProps, ariaDescribedBy: toggleNativeProps['aria-describedby'], disabled: disabled }, function (keytipAttributes) { return (React.createElement("button", tslib_1.__assign({}, toggleNativeProps, keytipAttributes, { className: classNames.pill, disabled: disabled, id: _this._id, type: "button", role: ariaRole, ref: _this._toggleButton, "aria-disabled": disabled, "aria-checked": checked, "aria-label": ariaLabel ? ariaLabel : badAriaLabel, "data-is-focusable": true, onChange: _this._noop, onClick: _this._onClick, "aria-labelledby": labelledById }),
                    React.createElement("div", { className: classNames.thumb }))); }),
                stateText && (React.createElement(Label, { htmlFor: this._id, className: classNames.text, id: stateTextId }, stateText)))));
    };
    ToggleBase.prototype.focus = function () {
        if (this._toggleButton.current) {
            this._toggleButton.current.focus();
        }
    };
    ToggleBase.prototype._noop = function () {
        /* no-op */
    };
    return ToggleBase;
}(BaseComponent));
export { ToggleBase };
//# sourceMappingURL=Toggle.base.js.map