import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useState, useEffect, } from 'react';
import { useTranslation } from 'react-i18next';
import { InputNumber, Typography } from 'antd';
import { SettingsFieldStyled, SettingsLabelCSS, SettingsInputCSS, } from './grid.style';
const MIN_STEP = 1;
export const StepField = ({ value, onChange, }) => {
    const { t } = useTranslation();
    const [inputValue, setInputValue] = useState(value);
    useEffect(() => {
        if (inputValue !== null && value !== inputValue) {
            setInputValue(value);
        }
    }, [value]);
    const handleChange = useCallback((newValue) => {
        setInputValue(newValue);
        onChange(newValue !== null && newValue !== void 0 ? newValue : MIN_STEP);
    }, [onChange]);
    const handleBlur = useCallback(() => {
        setInputValue(value);
    }, [value]);
    return (_jsxs(SettingsFieldStyled, { children: [_jsx(Typography.Text, { css: SettingsLabelCSS, children: t('settings.grid.modal.field.step.label') }), _jsx(InputNumber, { css: SettingsInputCSS, type: "number", size: "small", min: MIN_STEP, value: inputValue, onChange: handleChange, onBlur: handleBlur, controls: false, precision: 0 })] }));
};
