import React from 'react';
import { Input, InputProps } from 'antd';

export interface BlurInputProp {
  value?: string;
  suffix?: InputProps['suffix'];
  onChange?: (value: string) => void;
}

export default function BlurInput({ value, onChange, ...rest }: BlurInputProp) {
  const [editValue, setEditValue] = React.useState<string>('');

  React.useEffect(() => {
    setEditValue(value ?? '');
  }, [value]);

  const handleChange = (newValue: string) => {
    setEditValue(newValue);
    onChange?.(newValue);
  };

  return (
    <Input
      size="small"
      value={editValue}
      onChange={(e) => setEditValue(e.target.value)}
      onBlur={(e) => handleChange(e.target.value)}
      onPressEnter={(e) => handleChange(e.currentTarget.value)}
      onPasteCapture={(e) => handleChange(e.currentTarget.value)}
      {...rest}
    />
  );
}