import { jsxs, jsx } from "react/jsx-runtime";
import { Root, Indicator } from "@radix-ui/react-checkbox";
import * as React from "react";
import { useBindingState } from "../../form/hooks/useBindingState.js";
import { concat } from "../../utils/classNames.js";
import "../../utils/globals.js";
import "zod";
import { useDidUpdateEffect } from "../../hooks/useDidUpdateEffect.js";
import { useArmstrongConfig } from "../config/config.context.js";
import { Label } from "../label/label.component.js";
import { StatusWrapper } from "../statusWrapper/statusWrapper.component.js";
import { ValidationErrors } from "../validationErrors/validationErrors.component.js";
import "./checkbox.theme.css.js";
const Checkbox = React.forwardRef(({ bind, checked, customIndicator, className, customIndeterminateIndicator, disabled, onCheckedChange, label, labelClassName, labelId, scrollValidationErrorsIntoView, statusClassName, testId, validationErrorsClassName, validationErrorMessages, validationMode, displaySize, required, requiredIndicator, statusPosition, autoValidate, ...nativeProps }, ref) => {
  var _a;
  const reactId = React.useId();
  const id = nativeProps.id ?? reactId;
  const [boundValue, setBoundValue, bindConfig] = useBindingState(bind, {
    value: checked,
    onChange: onCheckedChange,
    validationErrorMessages,
    validationMode,
    autoValidate
  });
  const globals = useArmstrongConfig({
    scrollValidationErrorsIntoView,
    checkboxCustomIndicator: customIndicator,
    checkboxCustomIndeterminateIndicator: customIndeterminateIndicator,
    requiredIndicator,
    inputStatusPosition: statusPosition,
    validationMode: bindConfig.validationMode,
    autoValidate: bindConfig.autoValidate,
    inputDisplaySize: displaySize
  });
  const onCheckedChangeInternal = React.useCallback((newValue) => {
    setBoundValue == null ? void 0 : setBoundValue(newValue);
  }, [setBoundValue]);
  useDidUpdateEffect(() => {
    if (globals.autoValidate) {
      bindConfig.validate();
    }
    bindConfig.setTouched(true);
  }, [boundValue]);
  const indicator = React.useMemo(() => {
    switch (boundValue) {
      case "indeterminate":
        return globals.checkboxCustomIndeterminateIndicator;
      default:
        return globals.checkboxCustomIndicator;
    }
  }, [boundValue, globals.checkboxCustomIndicator, globals.checkboxCustomIndeterminateIndicator]);
  return jsxs(StatusWrapper, { className: concat(statusClassName, "arm-input-base"), validationMode: bindConfig.validationMode, errorIcon: bindConfig.validationErrorIcon, statusPosition: globals.inputStatusPosition, children: [jsxs("div", { className: concat("arm-checkbox-container", className), "data-disabled": !!disabled, "data-testid": testId, "data-size": globals.inputDisplaySize, ...nativeProps, children: [jsx(Root, { className: "arm-checkbox", disabled, id, checked: boundValue ?? void 0, onCheckedChange: onCheckedChangeInternal, ref, children: jsx(Indicator, { className: "arm-checkbox-indicator", children: indicator }) }), label && jsx(Label, { className: concat("arm-checkbox-label", labelClassName), "data-disabled": !!disabled, htmlFor: id, required, requiredIndicator: globals.requiredIndicator, displaySize: globals.inputDisplaySize, children: label })] }), !!((_a = bindConfig.validationErrorMessages) == null ? void 0 : _a.length) && bindConfig.shouldShowValidationErrorMessage && jsx(ValidationErrors, { className: validationErrorsClassName, validationMode: globals.validationMode, validationErrors: bindConfig.validationErrorMessages, scrollIntoView: globals.scrollValidationErrorsIntoView })] });
});
Checkbox.displayName = "Checkbox";
export {
  Checkbox
};
//# sourceMappingURL=checkbox.component.js.map
