"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledCheckbox = exports.Checkbox = exports.MinimalCheckbox = void 0;
var react_1 = __importDefault(require("react"));
var colors_1 = require("../../base/colors");
var styles_1 = require("@mui/styles");
var Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
var clsx_1 = __importDefault(require("clsx"));
var Flex_1 = require("../Flex");
var Label_1 = require("../Text/Label");
var useStyles = styles_1.makeStyles({
    labelDisabled: {
        cursor: "default",
        color: colors_1.text.secondary,
        filter: "opacity(0.6)",
    },
    labelRoot: {
        cursor: "pointer",
    },
    next: {
        "&.Mui-disabled": {
            color: colors_1.green.standard,
            backgroundColor: colors_1.green.subtle,
        },
    },
    rootColor: {
        color: colors_1.grey.light,
        backgroundColor: "white",
        "&.Mui-checked": {
            color: colors_1.green.standard,
        },
        "&.Mui-disabled": {
            color: colors_1.grey.standard,
            backgroundColor: colors_1.grey.soft,
        },
    },
    root: {
        padding: 0,
        borderRadius: 4,
        stroke: "white",
        strokeWidth: 1,
        height: "1rem",
        width: "1rem",
        "&:hover": {
            outline: "1px solid " + colors_1.green.light,
        },
        "&.Mui-disabled": {
            cursor: "default",
        },
    },
});
// MUI's Checkbox for use with a label with minimal styling
exports.MinimalCheckbox = styles_1.withStyles({
    root: {
        padding: 0,
        borderRadius: 4,
        height: "1rem",
        width: "1rem",
        "&$disabled": {
            color: colors_1.grey.standard,
            backgroundColor: colors_1.grey.soft,
            cursor: "default",
        },
    },
    disabled: {},
})(Checkbox_1.default);
var Checkbox = function (_a) {
    var _b, _c;
    var label = _a.label, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.next, next = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.setChecked, setChecked = _h === void 0 ? function () { } : _h, _j = _a.tabIndex, tabIndex = _j === void 0 ? 0 : _j, props = __rest(_a, ["label", "checked", "className", "next", "disabled", "setChecked", "tabIndex"]);
    var classes = useStyles();
    return (react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
        react_1.default.createElement(Checkbox_1.default, __assign({ disabled: disabled || next, checked: checked, onChange: setChecked, className: clsx_1.default(className, classes.root, (_b = {
                    "spec-next": next
                },
                _b[classes.next] = next,
                _b[classes.rootColor] = !next,
                _b)) }, props)),
        label && (react_1.default.createElement(Label_1.CheckboxLabel, { onClick: disabled ? undefined : setChecked, disabled: disabled, onKeyPress: disabled ? undefined : setChecked, ml: 2, className: clsx_1.default((_c = {},
                _c[classes.labelDisabled] = disabled && !next,
                _c[classes.labelRoot] = !disabled,
                _c)) }, label))));
};
exports.Checkbox = Checkbox;
var StyledCheckbox = function (_a) {
    var label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.next, next = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.setChecked, setChecked = _e === void 0 ? function () { } : _e, _f = _a.tabIndex, tabIndex = _f === void 0 ? 0 : _f, props = __rest(_a, ["label", "checked", "next", "disabled", "setChecked", "tabIndex"]);
    return (react_1.default.createElement(Flex_1.Flex, { alignItems: "center" },
        react_1.default.createElement(exports.MinimalCheckbox, __assign({ disabled: disabled, checked: checked, onChange: setChecked }, props)),
        label && (react_1.default.createElement(Label_1.CheckboxLabel, { onClick: disabled ? undefined : setChecked, disabled: disabled, onKeyPress: disabled ? undefined : setChecked, variant: "body1", ml: 2 }, label))));
};
exports.StyledCheckbox = StyledCheckbox;
//# sourceMappingURL=Checkbox.js.map