import React, { FC } from 'react';
import NumberInputOriginal, { NumberFormatProps } from 'react-number-format';
import { BaseInput, BaseInputProps } from '../BaseInput';

const CustomInput = (customInputProps: BaseInputProps) => (
  <BaseInput
    {...customInputProps}
    onWheel={(e: React.WheelEvent<HTMLInputElement>) => {
      e.currentTarget.blur();
      if (customInputProps.onWheel) customInputProps.onWheel(e);
    }}
  />
);

export const NumberInput: FC<NumberFormatProps & BaseInputProps> = (props) => {
  const { name, ...otherProps } = props;

  return (
    <NumberInputOriginal
      customInput={CustomInput}
      name={name}
      id={name}
      {...otherProps}
    />
  );
};
