"use strict";
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.Checkbox = exports.CheckboxBase = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const core_1 = require("../core");
const icon_1 = __importDefault(require("../icon"));
const t_1 = __importDefault(require("../t"));
const utils_1 = require("../utils");
const consts_1 = require("./consts");
const context_1 = require("./context");
const CheckboxControl = core_1.styled.spanBox `
  border-radius: none;
  display: inline-flex;
  flex-shrink: 0;
  position: relative;
  transition-duration: fast;
`;
const CheckboxInput = core_1.styled.input `
  cursor: inherit;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
`;
exports.CheckboxBase = core_1.styled.labelBox `
  cursor: pointer;
  display: inline-flex;
  width: fit-content;

  &:not([aria-disabled='true']):hover .vui-checkboxControl {
    color: ${p => core_1.th.color(p.controlHoverColor)};
  }

  .vui-checkboxControl:focus-within {
    color: ${consts_1.checkboxColors.focus};
  }

  &[aria-disabled='true'] {
    color: ${consts_1.disabled.text};
    cursor: not-allowed;

    .vui-checkboxControl {
      color: ${consts_1.disabled.icon};
    }
  }
`;
/**
 * Allows selection of one or more choices from a set of items. Handles controlled and uncontrolled modes.
 * Uses icons to display itself in different states. Can be indeterminate when selecting some nested items.
 */
exports.Checkbox = (0, core_1.vui)((props, ref) => {
    var _a;
    const _b = (_a = (0, context_1.useCheckboxGroupContext)()) !== null && _a !== void 0 ? _a : {}, { defaultValue: groupDefaultValue } = _b, checkboxGroupProps = __rest(_b, ["defaultValue"]);
    const mergedProps = Object.assign(Object.assign({}, checkboxGroupProps), props);
    const _c = (0, core_1.omitThemingProps)(mergedProps), { checked, children, className, defaultChecked = groupDefaultValue !== undefined ? groupDefaultValue.includes(props.value) : undefined, disabled, icon: iconProp = 'cuiCheckboxUnselected', iconChecked = 'cuiCheckboxSelected', iconIndeterminate = 'cuiCheckboxIndeterminate', id, inputProps, inputRef, isIndeterminate, label, name, onChange: onChangeProp, required, value } = _c, rest = __rest(_c, ["checked", "children", "className", "defaultChecked", "disabled", "icon", "iconChecked", "iconIndeterminate", "id", "inputProps", "inputRef", "isIndeterminate", "label", "name", "onChange", "required", "value"]);
    const [isChecked, setIsChecked] = (0, react_1.useState)(defaultChecked);
    const styles = (0, core_1.useStyleConfig)('Checkbox', mergedProps);
    const _d = styles.control, { color: controlColor, hoverColor } = _d, controlStyles = __rest(_d, ["color", "hoverColor"]);
    const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp;
    const controlMr = children || label ? 1 : 0;
    const color = isChecked || isIndeterminate ? consts_1.checkboxColors.checked : controlColor;
    const controlHoverColor = hoverColor ? hoverColor : consts_1.checkboxColors.hover;
    const isLongLabel = label && (label === null || label === void 0 ? void 0 : label.length) >= 60;
    (0, react_1.useEffect)(() => {
        checked !== undefined && setIsChecked(checked);
    }, [checked]);
    const onChange = (e) => {
        if (checked === undefined)
            setIsChecked(e.target.checked);
        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
    };
    const aliasedProps = (0, utils_1.filterUndefined)({
        'aria-disabled': disabled,
    });
    return ((0, jsx_runtime_1.jsxs)(exports.CheckboxBase, Object.assign({ alignItems: isLongLabel ? 'flex-start' : 'center', className: (0, utils_1.cs)('vui-checkbox', className), controlHoverColor: controlHoverColor, ref: ref }, styles.container, aliasedProps, rest, { children: [(0, jsx_runtime_1.jsxs)(CheckboxControl, Object.assign({ bg: "white", className: "vui-checkboxControl", color: color, focusWithinRing: 3, mr: controlMr, role: "none" }, controlStyles, { children: [(0, jsx_runtime_1.jsx)(CheckboxInput, Object.assign({ className: "vui-checkboxInput", onChange: onChange, ref: inputRef, type: "checkbox", checked, defaultChecked, disabled, id, name, required, value }, inputProps)), (0, jsx_runtime_1.jsx)(icon_1.default, { className: "vui-checkboxIcon", h: "100%", name: icon, w: "100%" })] })), children !== null && children !== void 0 ? children : (label && ((0, jsx_runtime_1.jsx)(t_1.default, Object.assign({ className: "vui-checkboxLabel", lineHeight: isLongLabel ? '26px' : 'normal' }, styles.label, { children: label }))))] })));
});
exports.Checkbox.displayName = 'Checkbox';
exports.default = exports.Checkbox;
//# sourceMappingURL=checkbox.js.map