import React from "react";
import { InputAttributes, NumericFormat, NumericFormatProps } from "react-number-format";

interface CustomProps {
  onChange: (event: { target: { name: string; value: string } }) => void;
  name: string;
}

const MoneyFormat = React.forwardRef<
  NumericFormatProps<InputAttributes>,
  CustomProps
>(function MoneyFormat(props, ref) {
  const { onChange, ...other } = props;

  return (
    <NumericFormat
      {...other}
      getInputRef={ref}
      onValueChange={(values) => {
        onChange({
          target: {
            name: props.name,
            value: values.value,
          },
        });
      }}
      thousandSeparator
      valueIsNumericString
      allowLeadingZeros={false}
    />
  );
});

export default MoneyFormat;