import React from 'react';
import { InputNumber } from 'antd';

export interface BlurInputNumberProp {
  value?: number;
  onChange?: (value: number) => void;
}

const BlurInputNumber: React.FC<BlurInputNumberProp> = function ({ value, onChange }) {
  const [editValue, setEditValue] = React.useState<number | null>(0);

  React.useEffect(() => {
    setEditValue(value || 0);
  }, [value]);

  const handleChange = (value: number) => {
    setEditValue(value);
    onChange?.(value);
  };

  return (
    <InputNumber
      size="small"
      className="!w-full"
      value={editValue}
      onChange={setEditValue}
      onBlur={(e) => handleChange(Number(e.target.value))}
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      onPressEnter={(e) => handleChange(Number(e.target.value))}
      onPasteCapture={(e) => handleChange(Number(e.currentTarget.value))}
    />
  );
};

export default BlurInputNumber;