"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Icon_1 = require("../../Icon");
var Utilities_2 = require("../../Utilities");
var Styling_1 = require("../../Styling");
var Checkbox_styles_1 = require("./Checkbox.styles");
var Checkbox = (function (_super) {
    tslib_1.__extends(Checkbox, _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 Checkbox(props, context) {
        var _this = _super.call(this, props, context) || this;
        _this._warnMutuallyExclusive({
            'checked': 'defaultChecked'
        });
        _this._id = Utilities_1.getId('checkbox-');
        _this.state = {
            isChecked: !!(props.checked !== undefined ? props.checked : props.defaultChecked)
        };
        return _this;
    }
    Checkbox.prototype.componentWillReceiveProps = function (newProps) {
        if (newProps.checked !== undefined) {
            this.setState({
                isChecked: !!newProps.checked // convert null to false
            });
        }
    };
    /**
     * Render the Checkbox based on passed props
     */
    Checkbox.prototype.render = function () {
        var _a = this.props, checked = _a.checked, className = _a.className, defaultChecked = _a.defaultChecked, disabled = _a.disabled, inputProps = _a.inputProps, label = _a.label, name = _a.name, boxSide = _a.boxSide, theme = _a.theme, customStyles = _a.styles;
        var isChecked = checked === undefined ? this.state.isChecked : checked;
        var isReversed = boxSide !== 'start' ? true : false;
        var classNames = this._getClassNames(Checkbox_styles_1.getStyles(theme, customStyles), className, disabled, isChecked, isReversed);
        return (React.createElement("button", tslib_1.__assign({}, inputProps, (checked !== undefined && { checked: checked }), (defaultChecked !== undefined && { defaultChecked: defaultChecked }), { disabled: disabled, ref: this._resolveRef('_checkBox'), name: name, id: this._id, role: 'checkbox', className: classNames.root, onClick: this._onClick, onFocus: this._onFocus, onBlur: this._onBlur, "aria-checked": isChecked, "aria-disabled": disabled }),
            React.createElement("label", { className: classNames.label, htmlFor: this._id },
                React.createElement("div", { className: classNames.checkbox },
                    React.createElement(Icon_1.Icon, { iconName: 'CheckMark', className: classNames.checkmark })),
                label && React.createElement("span", { className: classNames.text }, label))));
    };
    Object.defineProperty(Checkbox.prototype, "checked", {
        get: function () {
            return this.state.isChecked;
        },
        enumerable: true,
        configurable: true
    });
    Checkbox.prototype.focus = function () {
        if (this._checkBox) {
            this._checkBox.focus();
        }
    };
    Checkbox.prototype._onFocus = function (ev) {
        var inputProps = this.props.inputProps;
        if (inputProps && inputProps.onFocus) {
            inputProps.onFocus(ev);
        }
    };
    Checkbox.prototype._onBlur = function (ev) {
        var inputProps = this.props.inputProps;
        if (inputProps && inputProps.onBlur) {
            inputProps.onBlur(ev);
        }
    };
    Checkbox.prototype._onClick = function (ev) {
        var onChange = this.props.onChange;
        var isChecked = this.state.isChecked;
        if (onChange) {
            onChange(ev, !isChecked);
        }
        if (this.props.checked === undefined) {
            this.setState({ isChecked: !isChecked });
        }
    };
    Checkbox.prototype._getClassNames = function (styles, className, disabled, isChecked, isReversed) {
        return {
            root: Styling_1.mergeStyles('ms-Checkbox', isReversed && 'reversed', isChecked && 'is-checked', !disabled && 'is-enabled', disabled && 'is-disabled', className, styles.root, !disabled && [
                !isChecked && {
                    ':hover .ms-Checkbox-checkbox': styles.checkboxHovered
                },
                isChecked && {
                    ':hover .ms-Checkbox-checkbox': styles.checkboxCheckedHovered
                },
                {
                    ':hover .ms-Checkbox-text': styles.textHovered
                }
            ]),
            label: Styling_1.mergeStyles('ms-Checkbox-label', styles.label, isReversed && styles.labelReversed, disabled && styles.labelDisabled),
            checkbox: Styling_1.mergeStyles('ms-Checkbox-checkbox', styles.checkbox, !disabled && isChecked && styles.checkboxChecked, disabled && !isChecked && styles.checkboxDisabled, disabled && isChecked && styles.checkboxCheckedDisabled),
            checkmark: Styling_1.mergeStyles(styles.checkmark, !disabled && isChecked && styles.checkmarkChecked, disabled && !isChecked && styles.checkmarkDisabled, disabled && isChecked && styles.checkmarkCheckedDisabled),
            text: Styling_1.mergeStyles('ms-Checkbox-text', styles.text, disabled && styles.textDisabled),
        };
    };
    return Checkbox;
}(Utilities_1.BaseComponent));
Checkbox.defaultProps = {
    boxSide: 'start'
};
tslib_1.__decorate([
    Utilities_1.autobind
], Checkbox.prototype, "_onFocus", null);
tslib_1.__decorate([
    Utilities_1.autobind
], Checkbox.prototype, "_onBlur", null);
tslib_1.__decorate([
    Utilities_1.autobind
], Checkbox.prototype, "_onClick", null);
tslib_1.__decorate([
    Utilities_1.memoize
], Checkbox.prototype, "_getClassNames", null);
Checkbox = tslib_1.__decorate([
    Utilities_2.customizable(['theme'])
], Checkbox);
exports.Checkbox = Checkbox;

//# sourceMappingURL=Checkbox.js.map
