"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toggle = void 0;
const react_1 = __importDefault(require("react"));
const inlines_1 = require("inlines");
const varsUtilities_1 = require("../../varsUtilities");
const usePropState_1 = require("../../hooks/usePropState");
const breakpoints_1 = require("../../utils/breakpoints");
const Toggle = ({ value, color = 'primary', disabled, onChange, size = 'large', style, }) => {
    const [checked, setChecked] = (0, usePropState_1.usePropState)(value);
    const width = size === 'large' ? '36px' : '28px';
    const height = size === 'large' ? '20px' : '16px';
    const circleSize = size === 'large' ? '16px' : '12px';
    return (react_1.default.createElement(inlines_1.styled.div, { key: "asdasd", 
        // type="checkbox"
        disabled: disabled, onClick: (e) => {
            e.stopPropagation();
            e.preventDefault();
            const newChecked = !checked;
            setChecked(newChecked);
            onChange?.(newChecked);
        }, style: {
            width,
            height,
            borderRadius: '24px',
            cursor: disabled ? 'not-allowed' : 'pointer',
            pointerEvents: disabled ? 'none' : 'auto',
            opacity: disabled ? 0.6 : 1,
            position: 'relative',
            display: 'flex',
            alignItems: 'center',
            backgroundColor: (0, varsUtilities_1.color)('action', checked ? color : 'neutral', checked ? 'normal' : 'subtleNormal'),
            '&:hover': !disabled
                ? {
                    backgroundColor: (0, varsUtilities_1.color)('action', checked ? color : 'neutral', checked ? 'hover' : 'subtleHover'),
                }
                : null,
            [breakpoints_1.BpTablet]: {
                '&:hover': {
                    backgroundColor: (0, varsUtilities_1.color)('action', checked ? color : 'neutral', checked ? 'normal' : 'subtleNormal'),
                },
            },
            '&:active': !disabled
                ? {
                    backgroundColor: (0, varsUtilities_1.color)('action', checked ? color : 'neutral', checked ? 'active' : 'subtleActive'),
                }
                : null,
            '&:focus': !disabled
                ? {
                    outline: '1px solid',
                    outlineColor: (0, varsUtilities_1.color)('action', color, 'selected'),
                    outlineOffset: '1px',
                }
                : null,
            transition: 'all 0.2s',
            '&:before': {
                content: '" "',
                width: circleSize,
                height: circleSize,
                borderRadius: '50%',
                transform: checked
                    ? `translate3d(${size === 'medium' ? '14px' : '18px'}, 0px, 0px)`
                    : 'translate3d(2px, 0px, 0px)',
                transition: 'transform 0.2s',
                boxShadow: '0px 2px 8px -1px rgba(27, 36, 44, 0.08), 0px 2px 2px -1px rgba(27, 36, 44, 0.04)',
                backgroundColor: (0, varsUtilities_1.color)('content', 'inverted', 'primary'),
            },
            ...style,
        } }));
};
exports.Toggle = Toggle;
//# sourceMappingURL=index.js.map