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

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

  return (
    <NumberInputOriginal
      customInput={(customInputProps) => (
        <BaseInput
          {...customInputProps}
          onWheel={(e: React.WheelEvent<HTMLInputElement>) => {
            e.currentTarget.blur();
            if (customInputProps.onWheel) customInputProps.onWheel(e);
          }}
        />
      )}
      name={name}
      id={name}
      {...otherProps}
    />
  );
};
