import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import './style.scss';
import GetSvgIcon from '../GetSvgIcon';
const NumberStringInput = ({ initialNumber = 0, placeholder = '123', unit, handleChange = (value) => { return value; }, }) => {
    const [value, setValue] = useState(`${initialNumber} ${unit}`);
    const handleInputChange = (event) => {
        const inputValue = event.target.value;
        if (/^[0-9]*$/.test(inputValue) && inputValue) {
            setValue(inputValue);
            handleChange(parseInt(inputValue));
        }
        else if (inputValue.trim().length === 0) {
            setValue('0');
            handleChange(0);
        }
    };
    const handleIncrement = () => {
        if (value !== '') {
            setValue(`${parseInt(value) + 1} ${unit}`);
            handleChange(parseInt(value.split(' ')[0]) + 1);
        }
        else if (value === '') {
            setValue('0');
            handleChange(0);
        }
    };
    const handleDecrement = () => {
        if (parseInt(value) > 0) {
            setValue(`${parseInt(value) - 1} ${unit}`);
            handleChange(parseInt(value.split(' ')[0]) - 1);
        }
    };
    return (_jsxs("div", { className: 'numberStringInputField', children: [_jsx("input", { placeholder: placeholder, disabled: true, type: "text", value: value, onChange: handleInputChange }), _jsxs("div", { className: "numberStringInputField-Buttons", children: [_jsx("button", { onClick: handleIncrement, children: _jsx(GetSvgIcon, { iconType: "cheveronUp", iconSize: "16" }) }), _jsx("button", { onClick: handleDecrement, children: _jsx(GetSvgIcon, { iconType: "cheveronDown", iconSize: "16" }) })] })] }));
};
export default NumberStringInput;
