var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as classnames from "classnames";
import * as PropTypes from "prop-types";
import * as React from "react";
import * as ReactDOM from "react-dom";
import CheckMark from "./CheckMark";
import PartialMark from "./PartialMark";
import "./Checkbox.less";
var propTypes = {
    checked: PropTypes.bool,
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    disabled: PropTypes.bool,
    id: PropTypes.string,
    onChange: PropTypes.func,
    partial: PropTypes.bool,
    tabIndex: PropTypes.number,
    value: PropTypes.any,
};
var cssClass = {
    CHECK_MARK: "Checkbox--checkMark",
    CHECKED: "Checkbox--checked",
    CONTAINER: "Checkbox",
    DISABLED: "Checkbox--disabled",
    INNER: "Checkbox--inner",
    LABEL: "Checkbox--label",
    OUTER: "Checkbox--outer",
    PARTIAL_MARK: "Checkbox--partialMark",
    PARTIAL: "Checkbox--partial",
};
var LABEL_ID_PREFIX = "Checkbox--label";
var nextLabelIDSuffix = 0;
var getNextLabelID = function () { return LABEL_ID_PREFIX + "--" + nextLabelIDSuffix++; };
/**
 * Form element for single or multiple selections from a list.
 * Common uses:
 *   - Use a checkbox for optional opt-in/out form elements
 *   - Use checkboxes when a user may view and select one or more options from a relatively short
 *     list of choices.
 *
 * W3C spec: https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox
 */
var Checkbox = /** @class */ (function (_super) {
    __extends(Checkbox, _super);
    function Checkbox() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._element = null;
        _this._labelID = getNextLabelID();
        _this._onClick = function () {
            var _a = _this.props, disabled = _a.disabled, id = _a.id, onChange = _a.onChange, checked = _a.checked, partial = _a.partial, value = _a.value;
            if (disabled) {
                return;
            }
            // Toggle the checked state.
            // If we're in a partial checked state, moved to a fully checked state.
            var newCheckedState = !checked;
            if (checked && partial) {
                newCheckedState = true;
            }
            if (onChange) {
                onChange({ id: id, checked: newCheckedState, value: value });
            }
        };
        return _this;
    }
    Checkbox.prototype.focus = function () {
        if (this._element) {
            this._element.focus();
        }
    };
    Checkbox.prototype.componentDidMount = function () {
        this._element = ReactDOM.findDOMNode(this);
    };
    Checkbox.prototype.render = function () {
        var _a = this.props, checked = _a.checked, children = _a.children, className = _a.className, disabled = _a.disabled, partial = _a.partial, tabIndex = _a.tabIndex;
        var ariaCheckedState;
        ariaCheckedState = !!checked;
        if (ariaCheckedState && partial) {
            ariaCheckedState = "mixed";
        }
        var hasLabel = !!children;
        return (React.createElement("button", { "aria-checked": ariaCheckedState, "aria-labelledby": hasLabel ? this._labelID : undefined, "aria-label": !hasLabel ? "select/unselect" : undefined, className: classnames(cssClass.CONTAINER, checked && cssClass.CHECKED, disabled && cssClass.DISABLED, partial && cssClass.PARTIAL, className), disabled: disabled, onClick: this._onClick, role: "checkbox", tabIndex: tabIndex },
            React.createElement("div", { className: cssClass.OUTER },
                React.createElement("div", { className: cssClass.INNER }, partial ? (React.createElement(PartialMark, { className: cssClass.PARTIAL_MARK })) : (checked && React.createElement(CheckMark, { className: cssClass.CHECK_MARK })))),
            React.createElement("span", { className: cssClass.LABEL, id: this._labelID }, children)));
    };
    Checkbox.propTypes = propTypes;
    return Checkbox;
}(React.PureComponent));
export default Checkbox;
