import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import { useRef } from "react";
import "./style.scss";
import GetSvgIcon from "../GetSvgIcon";
const NumberInputField = ({ onFocus, onBlur, initialNumber = "0", unit, props = {}, placeholder = "123", isDisabled = false, isIncrementDisabled = false, isDecrementDisabled = false, handleChange = () => { }, dataCy, }) => {
    const inputRef = useRef(null);
    const handleInputChange = (event) => {
        const inputValue = event.target.value.replaceAll(",", "");
        if (inputValue === "") {
            handleChange(0);
        }
        else if (/^[0-9]*$/.test(inputValue) && inputValue) {
            handleChange(parseInt(inputValue));
        }
    };
    const handleIncrement = () => {
        handleChange(parseInt(initialNumber) + 1);
    };
    const handleDecrement = () => {
        handleChange(parseInt(initialNumber) - 1);
    };
    const className = clsx({
        "numberInputField--Generic": true,
        "numberInputField--Disable": isDisabled,
    });
    const handleKeyDown = (event) => {
        if (event.key === "Enter" && inputRef.current) {
            inputRef.current.blur();
        }
    };
    return (_jsxs("div", { className: className, ...props, children: [unit, _jsx("input", { ref: inputRef, onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, type: "text", value: initialNumber, min: "1", onChange: handleInputChange, disabled: isDisabled, onKeyDown: handleKeyDown, "data-cy": dataCy }), _jsxs("div", { className: "numberInputField-Buttons", children: [_jsx("button", { onClick: handleIncrement, disabled: isDisabled || isIncrementDisabled, children: _jsx(GetSvgIcon, { iconType: "arrowUp", iconSize: "16" }) }), _jsx("button", { onClick: handleDecrement, disabled: isDisabled || isDecrementDisabled, children: _jsx(GetSvgIcon, { iconType: "arrowDown", iconSize: "16" }) })] })] }));
};
export default NumberInputField;
