import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, getId, classNamesFunction, mergeAriaAttributeValues } from '../../Utilities';
import { Icon } from '../../Icon';
import { KeytipData } from '../../KeytipData';
var getClassNames = classNamesFunction();
var CheckboxBase = /** @class */ (function (_super) {
    tslib_1.__extends(CheckboxBase, _super);
    /**
     * Initialize a new instance of the TopHeaderV2
     * @param props - Props for the component
     * @param context - Context or initial state for the base component.
     */
    function CheckboxBase(props, context) {
        var _this = _super.call(this, props, context) || this;
        _this._checkBox = React.createRef();
        _this._onFocus = function (ev) {
            var inputProps = _this.props.inputProps;
            if (inputProps && inputProps.onFocus) {
                inputProps.onFocus(ev);
            }
        };
        _this._onBlur = function (ev) {
            var inputProps = _this.props.inputProps;
            if (inputProps && inputProps.onBlur) {
                inputProps.onBlur(ev);
            }
        };
        _this._onClick = function (ev) {
            var _a = _this.props, disabled = _a.disabled, onChange = _a.onChange;
            var isChecked = _this.state.isChecked;
            ev.preventDefault();
            ev.stopPropagation();
            if (!disabled) {
                if (onChange) {
                    onChange(ev, !isChecked);
                }
                if (_this.props.checked === undefined) {
                    _this.setState({ isChecked: !isChecked });
                }
            }
        };
        _this._onRenderLabel = function (props) {
            var label = props.label;
            return label ? React.createElement("span", { className: _this._classNames.text }, label) : null;
        };
        _this._warnMutuallyExclusive({
            checked: 'defaultChecked'
        });
        _this._id = _this.props.id || getId('checkbox-');
        _this.state = {
            isChecked: !!(props.checked !== undefined ? props.checked : props.defaultChecked)
        };
        return _this;
    }
    CheckboxBase.prototype.componentWillReceiveProps = function (newProps) {
        if (newProps.checked !== undefined) {
            this.setState({
                isChecked: !!newProps.checked // convert null to false
            });
        }
    };
    /**
     * Render the Checkbox based on passed props
     */
    CheckboxBase.prototype.render = function () {
        var _this = this;
        var _a = this.props, checked = _a.checked, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, inputProps = _a.inputProps, name = _a.name, boxSide = _a.boxSide, theme = _a.theme, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, styles = _a.styles, _b = _a.onRenderLabel, onRenderLabel = _b === void 0 ? this._onRenderLabel : _b, checkmarkIconProps = _a.checkmarkIconProps, ariaPositionInSet = _a.ariaPositionInSet, ariaSetSize = _a.ariaSetSize, keytipProps = _a.keytipProps, title = _a.title;
        var isChecked = checked === undefined ? this.state.isChecked : checked;
        var isReversed = boxSide !== 'start' ? true : false;
        this._classNames = getClassNames(styles, {
            theme: theme,
            className: className,
            disabled: disabled,
            checked: isChecked,
            reversed: isReversed,
            isUsingCustomLabelRender: onRenderLabel !== this._onRenderLabel
        });
        return (React.createElement(KeytipData, { keytipProps: keytipProps, disabled: disabled }, function (keytipAttributes) { return (React.createElement("button", tslib_1.__assign({}, inputProps, { "data-ktp-execute-target": keytipAttributes['data-ktp-execute-target'] }, checked !== undefined && { checked: checked }, defaultChecked !== undefined && { defaultChecked: defaultChecked }, { disabled: disabled, ref: _this._checkBox, name: name, id: _this._id, role: "checkbox", type: "button", title: title, className: _this._classNames.root, onClick: _this._onClick, onFocus: _this._onFocus, onBlur: _this._onBlur, "aria-checked": isChecked, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": mergeAriaAttributeValues(ariaDescribedBy, keytipAttributes['aria-describedby']), "aria-posinset": ariaPositionInSet, "aria-setsize": ariaSetSize }),
            React.createElement("label", { className: _this._classNames.label, htmlFor: _this._id },
                React.createElement("div", { className: _this._classNames.checkbox, "data-ktp-target": keytipAttributes['data-ktp-target'] },
                    React.createElement(Icon, tslib_1.__assign({ iconName: "CheckMark" }, checkmarkIconProps, { className: _this._classNames.checkmark }))),
                onRenderLabel(_this.props, _this._onRenderLabel)))); }));
    };
    Object.defineProperty(CheckboxBase.prototype, "checked", {
        get: function () {
            return this.state.isChecked;
        },
        enumerable: true,
        configurable: true
    });
    CheckboxBase.prototype.focus = function () {
        if (this._checkBox.current) {
            this._checkBox.current.focus();
        }
    };
    CheckboxBase.defaultProps = {
        boxSide: 'start'
    };
    return CheckboxBase;
}(BaseComponent));
export { CheckboxBase };
//# sourceMappingURL=Checkbox.base.js.map