import { jsx, jsxs } from "react/jsx-runtime";
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 { useDebounce } from "../../hooks/useDebounce.js";
import { useDidUpdateEffect } from "../../hooks/useDidUpdateEffect.js";
import { onBlurWorkaround } from "../../workarounds/radixDialog.js";
import { useArmstrongConfig } from "../config/config.context.js";
import { InputWrapper } from "../inputWrapper/inputWrapper.component.js";
import "./textArea.theme.css.js";
const DebounceTextAreaBase = React.forwardRef(({ milliseconds, value, onValueChange, onChange, ...nativeProps }, ref) => {
  const [actualValue, setActualValue] = useDebounce(milliseconds, value, onValueChange);
  const onChangeEvent = React.useCallback((e) => {
    setActualValue(e.currentTarget.value);
    onChange == null ? void 0 : onChange(e);
  }, [setActualValue, onChange]);
  return jsx("textarea", { ref, value: actualValue, onChange: onChangeEvent, ...nativeProps });
});
DebounceTextAreaBase.displayName = "DebounceInput";
const TextArea = React.forwardRef(
  ({ bind, onChange, value, className, validationErrorMessages, validationMode, pending, disabled, disableOnPending, onValueChange, scrollValidationErrorsIntoView, delay, validationErrorsClassName, statusClassName, textAreaClassName, label, required, requiredIndicator, displaySize, labelClassName, labelId, testId, errorIcon, leftOverlay, rightOverlay, hideIconOnStatus, statusPosition, autoValidate, ...nativeProps }, ref) => {
    const reactId = React.useId();
    const id = nativeProps.id ?? reactId;
    const [boundValue, setBoundValue, bindConfig] = useBindingState(bind, {
      value: value == null ? void 0 : value.toString(),
      validationErrorMessages,
      validationErrorIcon: errorIcon,
      validationMode,
      autoValidate
    });
    const globals = useArmstrongConfig({
      validationMode: bindConfig.validationMode,
      disableControlOnPending: disableOnPending,
      inputStatusPosition: statusPosition,
      inputDisplaySize: displaySize,
      requiredIndicator,
      scrollValidationErrorsIntoView,
      validationErrorIcon: bindConfig.validationErrorIcon,
      hideInputErrorIconOnStatus: hideIconOnStatus,
      autoValidate: bindConfig.autoValidate
    });
    const onBindValueChange = React.useCallback((currentValue) => {
      var _a, _b, _c;
      const formattedValue = ((_c = (_b = (_a = bind == null ? void 0 : bind.bindConfig) == null ? void 0 : _a.format) == null ? void 0 : _b.toData) == null ? void 0 : _c.call(_b, currentValue)) || currentValue;
      setBoundValue(formattedValue);
    }, [setBoundValue, bind]);
    const onChangeEvent = React.useCallback((event) => {
      onChange == null ? void 0 : onChange(event);
      const currentValue = event.currentTarget.value;
      onBindValueChange(currentValue);
      onValueChange == null ? void 0 : onValueChange(currentValue);
    }, [onBindValueChange, onChange, onValueChange]);
    const onValueChangeEvent = React.useCallback((currentValue) => {
      onBindValueChange(currentValue);
      onValueChange == null ? void 0 : onValueChange(currentValue);
    }, [onValueChange, onBindValueChange]);
    useDidUpdateEffect(() => {
      if (globals.autoValidate && bindConfig.isTouched) {
        bindConfig.validate();
      }
    }, [boundValue]);
    const onBlurEvent = React.useCallback((event) => {
      var _a;
      if (globals.autoValidate && !bindConfig.isTouched) {
        bindConfig.validate();
      }
      bindConfig.setTouched(true);
      onBlurWorkaround(event);
      return (_a = nativeProps.onBlur) == null ? void 0 : _a.call(nativeProps, event);
    }, [bindConfig, globals.autoValidate, nativeProps]);
    const textAreaProps = {
      id,
      className: concat("arm-text-area", textAreaClassName),
      /** fallback to an empty string if bind is passed in but bound value is undefined to avoid React warning */
      value: (boundValue == null ? void 0 : boundValue.toString()) ?? (bind && ""),
      disabled,
      onBlur: onBlurEvent
    };
    return jsxs(InputWrapper, { "data-size": globals.inputDisplaySize, className: concat(className, "arm-text-area-wrapper"), statusClassName: concat(statusClassName, "arm-text-area-status"), validationErrorsClassName: concat(validationErrorsClassName, "arm-text-area-validation"), validationErrorMessages: bindConfig.validationErrorMessages, errorIcon: bindConfig.validationErrorIcon, validationMode: bindConfig.validationMode, pending, disabled, statusPosition: globals.inputStatusPosition, scrollValidationErrorsIntoView: globals.scrollValidationErrorsIntoView, disableOnPending: globals.disableControlOnPending, hideIconOnStatus: globals.hideInputErrorIconOnStatus, label, labelId: labelId ?? id, labelClassName: concat(labelClassName, "arm-text-area-label"), required, requiredIndicator: globals.requiredIndicator, "data-testid": testId, leftOverlay, rightOverlay, children: [!!delay && jsx(DebounceTextAreaBase, { ...nativeProps, ...textAreaProps, milliseconds: delay, onChange, onValueChange: onValueChangeEvent, ref }), !delay && jsx("textarea", { className: "arm-text-area", ...nativeProps, ...textAreaProps, onChange: onChangeEvent, ref, disabled: disabled || pending })] });
  }
  // type assertion to ensure generic works with RefForwarded component
  // DO NOT CHANGE TYPE WITHOUT CHANGING THIS, FIND TYPE BY INSPECTING React.forwardRef
);
TextArea.displayName = "Text Area";
export {
  TextArea
};
//# sourceMappingURL=textArea.component.js.map
