/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b859c78 | Cube Dev Team */
import { chain } from "../../../utils/react/chain.js";
import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
import { useEvent } from "../../../_internal/hooks/use-event.js";
import { useProviderProps } from "../../../provider.js";
import { useFieldProps } from "../../form/Form/use-field/use-field-props.js";
import { TextInputBase } from "../TextInput/TextInputBase.js";
import { castNullableStringValue } from "../../../utils/react/nullableValue.js";
import { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { useTextField } from "react-aria";

//#region src/components/fields/TextArea/TextArea.tsx
function TextArea(props, ref) {
	props = castNullableStringValue(props);
	props = useProviderProps(props);
	props = useFieldProps(props, {
		defaultValidationTrigger: "onBlur",
		valuePropsMapper: ({ value, onChange }) => ({
			onChange,
			value: value?.toString() ?? ""
		})
	});
	let { autoSize = false, isDisabled = false, isReadOnly = false, isRequired = false, onChange, maxRows = 10, rows = 3, mods, labelProps: userLabelProps, inputRef: propsInputRef, value, ...otherProps } = props;
	rows = Math.max(rows, 1);
	maxRows = Math.max(maxRows, rows);
	let localInputRef = useRef(null);
	let inputRef = propsInputRef ?? localInputRef;
	const adjustHeight = useEvent(() => {
		const textarea = inputRef.current;
		if (!textarea || !autoSize) return;
		textarea.style.height = "auto";
		const computedStyle = getComputedStyle(textarea);
		const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
		const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
		const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
		const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
		const lineHeight = parseInt(computedStyle.lineHeight) || 20;
		const contentHeight = textarea.scrollHeight - paddingTop - paddingBottom;
		const computedRows = Math.ceil(contentHeight / lineHeight);
		const totalHeight = Math.max(Math.min(computedRows, maxRows), rows) * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom;
		textarea.style.height = `${totalHeight}px`;
	});
	let { labelProps, inputProps } = useTextField({
		...otherProps,
		value,
		isDisabled,
		isReadOnly,
		isRequired,
		onChange: chain(onChange, adjustHeight),
		inputElementType: "textarea"
	}, inputRef);
	const mergedLabelProps = mergeProps$1(labelProps, userLabelProps);
	const useEnvironmentalEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
	useEnvironmentalEffect(() => {
		if (!autoSize || !inputRef.current) return;
		adjustHeight();
		const resizeObserver = new ResizeObserver(adjustHeight);
		resizeObserver.observe(inputRef?.current);
		return () => resizeObserver.disconnect();
	}, [autoSize, inputRef?.current]);
	useEnvironmentalEffect(() => {
		if (autoSize && inputRef.current) adjustHeight();
	}, [value]);
	return /* @__PURE__ */ jsx(TextInputBase, {
		ref,
		...otherProps,
		multiLine: true,
		inputRef,
		labelProps: mergedLabelProps,
		inputProps: {
			...inputProps,
			"data-input-type": "textarea"
		},
		isDisabled,
		isReadOnly,
		isRequired,
		rows
	});
}
/**
* TextInputs are text inputs that allow users to input custom text entries
* with a keyboard. Various decorations can be displayed around the field to
* communicate the entry requirements.
*/
const _TextArea = forwardRef(TextArea);
_TextArea.cubeInputType = "Text";
_TextArea.displayName = "TextArea";

//#endregion
export { _TextArea };
//# sourceMappingURL=TextArea.js.map