"use strict";
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 __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var classnames = require("classnames");
var PropTypes = require("prop-types");
var React = require("react");
var CloseIcon_1 = require("../CloseIcon/CloseIcon");
var CheckMark_1 = require("../Checkbox/CheckMark");
require("./Switch.less");
var flex_1 = require("../flex");
var propTypes = {
    ariaLabelledby: PropTypes.string,
    ariaLabel: PropTypes.string,
    className: PropTypes.string,
    checked: PropTypes.bool.isRequired,
    disabled: PropTypes.bool,
    onChange: PropTypes.func.isRequired,
};
var defaultProps = {
    ariaLabelledby: "",
    ariaLabel: "",
    className: "",
    disabled: false,
};
var cssClass = {
    BG: "Switch--bg",
    CHECKED: "Switch--checked",
    CHECKED_ICON: "Switch--checkedIcon",
    CONTAINER: "Switch",
    ICON_CONTAINER: "Switch--iconContainer",
    DISABLED: "Switch--disabled",
    HANDLE: "Switch--handle",
    HANDLE_GRIP_LEFT: "Switch--handleGripLeft",
    HANDLE_GRIP_RIGHT: "Switch--handleGripRight",
    UNCHECKED_ICON: "Switch--uncheckedIcon",
    OUTLINE: "Switch--outline",
    HOVER: "Switch--hover",
};
/**
 * Switch toggles a single setting on or off with an immediate effect.
 * Common uses:
 *   - Enable or disable preferences, settings, or features.
 *
 * W3C spec: https://www.w3.org/TR/wai-aria-practices-1.1/#checkbox
 */
var Switch = /** @class */ (function (_super) {
    __extends(Switch, _super);
    function Switch() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._onClick = function () {
            var _a = _this.props, onChange = _a.onChange, checked = _a.checked, disabled = _a.disabled;
            _this.setState({ mouseDown: false });
            if (!disabled) {
                onChange(!checked);
            }
        };
        return _this;
    }
    Switch.prototype.render = function () {
        var _a = this.props, ariaLabelledby = _a.ariaLabelledby, ariaLabel = _a.ariaLabel, className = _a.className, checked = _a.checked, disabled = _a.disabled;
        return (React.createElement("button", { "aria-checked": checked, "aria-disabled": disabled, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, className: classnames(cssClass.CONTAINER, className, cssClass.BG, checked && cssClass.CHECKED), disabled: disabled, role: "switch", onClick: this._onClick },
            React.createElement(flex_1.FlexBox, { className: cssClass.ICON_CONTAINER, justify: flex_1.Justify.BETWEEN, grow: true },
                React.createElement(flex_1.FlexBox, { column: true, justify: flex_1.Justify.CENTER },
                    React.createElement(CheckMark_1.default, { className: cssClass.CHECKED_ICON })),
                React.createElement(flex_1.FlexBox, { column: true, justify: flex_1.Justify.CENTER },
                    React.createElement(CloseIcon_1.CloseIcon, { className: cssClass.UNCHECKED_ICON }))),
            React.createElement("div", { className: classnames(cssClass.HANDLE, checked && cssClass.CHECKED, disabled && cssClass.DISABLED) },
                React.createElement("div", { className: cssClass.HANDLE_GRIP_LEFT }),
                React.createElement("div", { className: cssClass.HANDLE_GRIP_RIGHT }))));
    };
    Switch.propTypes = propTypes;
    Switch.defaultProps = defaultProps;
    return Switch;
}(React.PureComponent));
exports.default = Switch;
