"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BooleanPill = 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");
function BooleanPill({ value: valueProp, defaultValue, disabled, props, label = 'label', placeholder = 'placeholder', prefix = 'prefix', style, onChange = () => console.log(), icon, }) {
    const [value, setValue] = (0, useControllableState_1.useControllableState)({
        prop: valueProp,
        defaultProp: defaultValue,
        onChange: onChange,
    });
    return (react_1.default.createElement(inlines_1.styled.label, { onMouseDown: (e) => {
            e.stopPropagation();
        }, onChange: (e) => {
            if (disabled)
                return;
            setValue(true);
        }, disabled: disabled, className: "checkbox-group", style: {
            display: 'flex',
            boxSizing: 'border-box',
            maxHeight: 32,
            outline: 'none',
            cursor: 'pointer',
            minWidth: 130,
            maxWidth: '100%',
            padding: '4px 8px',
            fontSize: 14,
            lineHeight: '24px',
            border: value
                ? `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralNormal')}`
                : 'none',
            background: value
                ? (0, varsUtilities_1.color)('background', 'default', 'strong')
                : (0, varsUtilities_1.color)('action', 'neutral', 'subtleNormal'),
            '&:hover': {
                background: value
                    ? (0, varsUtilities_1.color)('background', 'default', 'strong')
                    : (0, varsUtilities_1.color)('action', 'neutral', 'subtleHover'),
                border: value
                    ? `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralHover')}`
                    : 'none',
            },
            '&:active': {
                background: value
                    ? (0, varsUtilities_1.color)('background', 'default', 'strong')
                    : (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive'),
                border: value
                    ? `1px solid ${(0, varsUtilities_1.color)('inputBorder', 'neutralActive')}`
                    : 'none',
            },
            borderRadius: 4,
            gap: 8,
            alignItems: 'center',
            ...style,
        } },
        value && react_1.default.createElement(icons_1.IconCheckLarge, null),
        icon,
        react_1.default.createElement(inlines_1.styled.div, { style: { display: 'flex', gap: 6 } },
            react_1.default.createElement(Text_1.Text, { selectable: "none", light: true },
                prefix,
                ":"),
            react_1.default.createElement(Text_1.Text, { selectable: "none", style: {} }, value ? label : placeholder)),
        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, { readOnly: true, type: "checkbox", checked: value, 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',
                    },
                } })),
        value && (react_1.default.createElement(inlines_1.styled.div, { onClick: (e) => {
                e.preventDefault();
                e.stopPropagation();
                setValue(false);
            }, style: {
                marginLeft: 'auto',
                width: '16px',
                height: '16px',
                borderRadius: '50%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                '&:hover': {
                    backgroundColor: (0, varsUtilities_1.color)('action', 'neutral', 'subtleHover'),
                },
                // [BpTablet]: {
                //   backgroundColor: 'transparent',
                // },
                '&:active': {
                    backgroundColor: (0, varsUtilities_1.color)('action', 'neutral', 'subtleActive'),
                },
            } },
            react_1.default.createElement(icons_1.IconSmallClose, null)))));
}
exports.BooleanPill = BooleanPill;
//# sourceMappingURL=Boolean.js.map