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

import TextField, { TextFieldProps } from '@material-hu/mui/TextField';

type FormDecimalNumberProps = TextFieldProps & {
  thousandSeparator: string;
  decimalSeparator: string;
  disabled: boolean;
  error: any;
  defaultValue?: any;
  lang: string;
};

const FormDecimalNumber: React.FC<FormDecimalNumberProps> = ({
  thousandSeparator,
  decimalSeparator,
  inputRef,
  onChange,
  disabled,
  defaultValue,
  sx,
  lang,
  error,
}) => {
  const handleValueChange: NumericFormatProps['onValueChange'] = values => {
    const floatValue = values.floatValue !== null ? values.floatValue : 0;
    onChange && onChange({ target: { value: floatValue } } as any);
  };

  return (
    <NumericFormat
      getInputRef={inputRef}
      onValueChange={handleValueChange}
      thousandSeparator={thousandSeparator}
      decimalSeparator={decimalSeparator}
      decimalScale={2}
      fixedDecimalScale
      allowNegative={false}
      customInput={TextField}
      disabled={disabled}
      error={!!error}
      defaultValue={defaultValue}
      valueIsNumericString={true}
      placeholder={lang === 'en' ? '0.00' : '0,00'}
      sx={sx}
      variant="outlined"
      fullWidth
    />
  );
};

export default FormDecimalNumber;
