import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from "clsx";
import GetSvgIcon from "../GetSvgIcon";
import "./style.scss";
const NumberInputFieldWithLimit = ({ initialNumber = "0", unit, props = {}, placeholder = "123", isDisabled = false, minLimit = -1, maxLimit = 10001, handleChange = () => { }, }) => {
    const isOverMaxLimit = parseInt(initialNumber.replace(/,/g, "")) > maxLimit - 1;
    let displayValue = isOverMaxLimit ? `${(maxLimit - 1).toLocaleString()}+` : parseInt(initialNumber.replace(/,/g, "")).toLocaleString();
    displayValue === "0" ? displayValue = "" : displayValue;
    const handleInputChange = (event) => {
        const inputValue = event.target.value.replace(/[,+]/g, "");
        if (inputValue === "") {
            handleChange(minLimit);
        }
        else if (/^[0-9]*$/.test(inputValue) && inputValue) {
            let numericValue = parseInt(event.target.value.replace(/,/g, ""));
            if (numericValue < minLimit) {
                numericValue = minLimit;
            }
            handleChange(numericValue);
        }
    };
    const handleIncrement = () => {
        handleChange(parseInt(initialNumber.replace(/,/g, "")) + 1);
    };
    const handleDecrement = () => {
        if (parseInt(initialNumber.replace(/,/g, "")) >= maxLimit) {
            handleChange(maxLimit - 1);
            return;
        }
        handleChange(parseInt(initialNumber.replace(/,/g, "")) - 1);
    };
    const className = clsx({
        "numberInputField--Generic": true,
        "numberInputField--Disable": isDisabled,
    });
    return (_jsxs("div", { className: className, ...props, children: [unit, _jsx("input", { placeholder: placeholder, type: "text", value: displayValue, min: "1", size: displayValue.length, onChange: handleInputChange, disabled: isDisabled }), _jsxs("div", { className: "numberInputField-Buttons", children: [_jsx("button", { onClick: handleIncrement, disabled: isDisabled || (parseInt(initialNumber.replace(/,/g, "")) >= maxLimit), children: _jsx(GetSvgIcon, { iconType: "arrowUp", iconSize: "16" }) }), _jsx("button", { onClick: handleDecrement, disabled: isDisabled || (parseInt(initialNumber.replace(/,/g, "")) <= minLimit), children: _jsx(GetSvgIcon, { iconType: "arrowDown", iconSize: "16" }) })] })] }));
};
export default NumberInputFieldWithLimit;
