import React from "react";
import PropTypes from "prop-types";
import { NumberFormatBase, useNumericFormat } from "react-number-format";
import { TextField } from "@mui/material";

export const NumberInput = (props) => {
  const { format, removeFormatting, ...rest } = useNumericFormat(props);
  const _format = (val) => {
    const _val = format(val);
    return _val;
  };

  delete rest.onChange;

  const _removeFormatting = (val) => {
    const _val = val.toLowerCase().replace(/[ ,]/g, "");
    return removeFormatting(_val);
  };
  return (
    <NumberFormatBase
      customInput={TextField}
      removeFormatting={_removeFormatting}
      format={_format}
      {...rest}
      onValueChange={(values) => {
        props.onChange({
          target: {
            name: props.id,
            value: values.floatValue,
          },
        });
      }}
    />
  );
};

NumberInput.propTypes = {
  id: PropTypes.any.isRequired,
  onChange: PropTypes.func.isRequired,
};
