"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.BoxedCheckbox = void 0;
var react_1 = __importDefault(require("react"));
var colors_1 = require("../../base/colors");
var text_1 = require("../../base/text");
var styles_1 = require("@mui/styles");
var clsx_1 = __importDefault(require("clsx"));
var Flex_1 = require("../Flex");
var Checkbox_1 = require("./Checkbox");
var useStyles = styles_1.makeStyles({
    root: {
        height: "100%",
        alignItems: "center",
        borderRadius: 4,
        backgroundColor: colors_1.grey.soft,
        cursor: "pointer",
        border: "1px solid " + colors_1.grey.soft,
        "&:hover, &:focus, &:active": {
            border: "1px solid " + colors_1.green.light,
            outline: "none",
        },
        "&& Label": {
            fontSize: text_1.fontSize[4],
        },
    },
    checked: {
        border: "1px solid " + colors_1.green.light,
        backgroundColor: colors_1.blue.subtle,
        "&& Label": {
            fontWeight: 500,
        },
    },
    disabled: {
        cursor: "default",
        border: "1px solid " + colors_1.grey.soft,
        "&:hover, &:focus, &:active": {
            border: "1px solid " + colors_1.grey.soft,
        },
    },
    disabledChecked: {
        cursor: "default",
        border: "1px solid " + colors_1.grey.light,
        "&:hover, &:focus, &:active": {
            border: "1px solid " + colors_1.grey.light,
        },
    },
});
var BoxedCheckbox = function (_a) {
    var _b;
    var label = _a.label, checked = _a.checked, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.setChecked, setChecked = _e === void 0 ? function () { } : _e, props = __rest(_a, ["label", "checked", "className", "disabled", "setChecked"]);
    var classes = useStyles();
    return (react_1.default.createElement(Flex_1.Flex, __assign({ role: "checkbox", "aria-checked": checked, tabIndex: 0, onClick: disabled ? undefined : setChecked, onKeyPress: disabled ? undefined : setChecked, className: clsx_1.default(className, classes.root, (_b = {},
            _b[classes.disabled] = !checked && disabled,
            _b[classes.checked] = checked && !disabled,
            _b[classes.disabledChecked] = disabled && checked,
            _b)) }, props),
        react_1.default.createElement(Flex_1.Flex, { margin: 3 },
            react_1.default.createElement(Checkbox_1.Checkbox, { label: label, checked: checked, disabled: disabled, setChecked: function () { }, tabIndex: undefined }))));
};
exports.BoxedCheckbox = BoxedCheckbox;
//# sourceMappingURL=BoxedCheckbox.js.map