"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxInput = void 0;
const react_1 = __importDefault(require("react"));
const icons_1 = require("../../icons");
const inlines_1 = require("inlines");
const Text_1 = require("../Text");
const varsUtilities_1 = require("../../varsUtilities");
const useControllableState_1 = require("../../hooks/useControllableState");
const utils_1 = require("../../utils");
function CheckboxInput({ value: valueProp, defaultValue: defaultValueProp, onChange: onChangeProp, disabled, title, style, description, intermediate, }) {
    const [value, setValue] = (0, useControllableState_1.useControllableState)({
        prop: valueProp,
        defaultProp: defaultValueProp,
        onChange: onChangeProp,
    });
    return (react_1.default.createElement(inlines_1.styled.label, { className: "checkbox-group", style: {
            cursor: 'pointer',
            position: 'relative',
            display: 'flex',
            alignItems: 'start',
            justifyContent: 'start',
            '&:focus': {
                outline: 'none',
            },
            '&:focus-within': {
            // outline: 'none',
            // border: `1px solid ${color('inputBorder', 'active', 'default')}`,
            // boxShadow: `0 0 0 2px ${color('border', 'brand', 'subtle')}`,
            },
            ...style,
        } },
        react_1.default.createElement("div", { style: {
                position: 'relative',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginTop: 4,
                opacity: disabled ? '40%' : '100%',
            } },
            react_1.default.createElement(inlines_1.styled.input, { type: "checkbox", checked: value, onMouseDown: (e) => {
                    e.stopPropagation();
                }, onChange: (e) => {
                    if (disabled || intermediate)
                        return;
                    setValue(e.target.checked);
                }, disabled: disabled, style: {
                    position: 'absolute',
                    width: 1,
                    height: 1,
                    padding: 0,
                    margin: -1,
                    overflow: 'hidden',
                    clip: 'rect(0,0,0,0)',
                    whiteSpace: 'nowrap',
                    borderWidth: 0,
                    '&::placeholder': {
                        color: (0, varsUtilities_1.color)('content', 'default', 'secondary'),
                    },
                    '&:focus': {
                        outline: 'none',
                    },
                } }),
            react_1.default.createElement(inlines_1.styled.div, { style: {
                    width: 16,
                    height: 16,
                    borderRadius: 4,
                    boxSizing: 'border-box',
                    background: intermediate
                        ? (0, varsUtilities_1.color)('action', 'primary', 'normal')
                        : value
                            ? (0, varsUtilities_1.color)('action', 'primary', 'normal')
                            : 'transparent',
                    border: intermediate || value
                        ? 'transparent'
                        : `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal', 'default')}`,
                    color: (0, varsUtilities_1.color)('content', 'inverted', 'primary'),
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    '.checkbox-group:hover &': {
                        borderColor: `${(0, varsUtilities_1.color)('inputBorder', 'neutralHover', 'default')} !important`,
                        background: `${intermediate
                            ? (0, varsUtilities_1.color)('action', 'primary', 'hover')
                            : value
                                ? (0, varsUtilities_1.color)('action', 'primary', 'hover')
                                : 'transparent'} !important`,
                    },
                    [utils_1.BpTablet]: {
                        '&:hover': {
                            background: intermediate
                                ? (0, varsUtilities_1.color)('action', 'primary', 'normal')
                                : value
                                    ? (0, varsUtilities_1.color)('action', 'primary', 'normal')
                                    : 'transparent',
                        },
                    },
                    '.checkbox-group:focus-within &': {
                        boxShadow: `0 0 0 1px ${(0, varsUtilities_1.color)('background', 'default')},0 0 0 3px ${(0, varsUtilities_1.color)('border', 'brand')}`,
                    },
                } }, intermediate ? (react_1.default.createElement(icons_1.IconMinus, { color: "inherit" })) : value ? (react_1.default.createElement(icons_1.IconCheckSmall, { color: "inherit" })) : null)),
        react_1.default.createElement("div", { style: { marginLeft: 12 } },
            react_1.default.createElement(Text_1.Text, { selectable: "none" }, title),
            react_1.default.createElement(Text_1.Text, { selectable: "none", light: true }, description))));
}
exports.CheckboxInput = CheckboxInput;
//# sourceMappingURL=CheckboxInput.js.map