import { jsxs, jsx } from "react/jsx-runtime";
import * as RadixSlider from "@radix-ui/react-slider";
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 { onBlurWorkaround } from "../../workarounds/radixDialog.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 "./rangeInput.theme.css.js";
const RangeInput = React.forwardRef(({ bind, className, disabled, onChange, label, labelClassName, labelId, scrollValidationErrorsIntoView, statusClassName, validationErrorsClassName, validationErrorMessages, displaySize, min, max, value, validationMode, step, required, customThumb, requiredIndicator, autoValidate, ...nativeProps }, ref) => {
  var _a;
  const [boundValue, setBoundValue, bindConfig] = useBindingState(bind, {
    value,
    onChange,
    validationErrorMessages,
    validationMode,
    autoValidate
  });
  const globals = useArmstrongConfig({
    scrollValidationErrorsIntoView,
    validationMode: bindConfig.validationMode,
    inputDisplaySize: displaySize,
    requiredIndicator,
    autoValidate: bindConfig.autoValidate,
    validationErrorIcon: bindConfig.validationErrorIcon
  });
  const generatedLabelId = React.useId();
  const finalLabelId = labelId ?? generatedLabelId;
  useDidUpdateEffect(() => {
    if (globals.autoValidate && bindConfig.isTouched) {
      bindConfig.validate();
    }
  }, [boundValue]);
  const onBlurEvent = React.useCallback((event) => {
    if (globals.autoValidate && !bindConfig.isTouched) {
      bindConfig.validate();
    }
    onBlurWorkaround(event);
    bindConfig.setTouched(true);
  }, [bindConfig, globals.autoValidate]);
  return jsxs(StatusWrapper, { className: concat(statusClassName, "arm-range-input-base"), validationMode: bindConfig.validationMode, errorIcon: bindConfig.validationErrorIcon, children: [label && jsx(Label, { id: finalLabelId, className: concat("arm-range-input-label", labelClassName), "data-disabled": disabled, required, displaySize: globals.inputDisplaySize, requiredIndicator: globals.requiredIndicator, children: label }), jsxs(RadixSlider.Root, { className: concat(className, "arm-range-input-root"), ...nativeProps, max, min, step, ref, disabled, "data-size": globals.inputDisplaySize, "aria-labelledby": finalLabelId, value: boundValue ? [boundValue] : void 0, onValueChange: (v) => setBoundValue(v == null ? void 0 : v[0]), children: [jsx(RadixSlider.Track, { className: "arm-range-input-track", children: jsx(RadixSlider.Range, { className: "arm-range-input-range" }) }), jsx(RadixSlider.Thumb, { className: "arm-range-input-thumb", "aria-label": typeof label === "string" ? label : void 0, onBlur: onBlurEvent, children: customThumb })] }), !!((_a = bindConfig.validationErrorMessages) == null ? void 0 : _a.length) && bindConfig.shouldShowValidationErrorMessage && jsx(ValidationErrors, { className: validationErrorsClassName, validationMode: globals.validationMode, validationErrors: bindConfig.validationErrorMessages, scrollIntoView: globals.scrollValidationErrorsIntoView })] });
});
RangeInput.displayName = "RangeInput";
export {
  RangeInput
};
//# sourceMappingURL=rangeInput.component.js.map
