import { TextInput } from "./TextInput.js";
import { useNumberInput } from "../hooks/useNumberInput/useNumberInput.js";
import { useCallback, useRef } from "react";
import { jsx } from "@emotion/react/jsx-runtime";
//#region src/components/NumberInput.tsx
function NumberInput({ maxValue, onRightButtonClick, onChange: onChangeProp, ...rest }) {
	const ref = useRef(null);
	const { getRenderValue, handleOnChange, handleOnBlur, handleOnFocus, handleOnKeyDown, handleOnKeyUp } = useNumberInput({
		...rest,
		onChange: onChangeProp,
		ref
	});
	const onChange = useCallback((value, event) => {
		handleOnChange(event);
	}, [handleOnChange]);
	const handleRightButtonClick = useCallback((event) => {
		event.preventDefault();
		if (maxValue && onChangeProp) onChangeProp(maxValue.toString());
		if (onRightButtonClick) onRightButtonClick(event);
	}, [
		maxValue,
		onRightButtonClick,
		onChangeProp
	]);
	const onKeyDown = useCallback((keyValue, event) => {
		handleOnKeyDown(event);
	}, [handleOnKeyDown]);
	return /* @__PURE__ */ jsx(TextInput, {
		placeholder: "Enter a number",
		...rest,
		onKeyDown,
		onKeyUp: handleOnKeyUp,
		onChange,
		onBlur: handleOnBlur,
		onFocus: handleOnFocus,
		value: getRenderValue(),
		inputRef: ref,
		type: "text",
		inputMode: "decimal",
		pattern: "[0-9,.]*",
		rightButtonText: maxValue ? "Max" : void 0,
		onRightButtonClick: handleRightButtonClick
	});
}
//#endregion
export { NumberInput, NumberInput as default };
