// form
import { useFormContext, Controller } from 'react-hook-form';
// @mui
import { InputAdornment, TextField, TextFieldProps, Typography } from '@mui/material';
import MoneyFormat from '../../numeric_format/MoneyFormat';
// import AutoNumeric from "autonumeric"
// import { useEffect, useRef } from 'react';
// import React from 'react';

// ----------------------------------------------------------------------

interface IProps {
  name: string;
  endAdornment?: React.ReactNode;
}

export default function RHFTextFieldNumber({ name, endAdornment, ...other }: IProps & TextFieldProps) {
  const { control, watch, setValue } = useFormContext();
  const values = watch();

  // const ref = React.createRef();
  // const mountedRef = useRef(false);
  // useEffect(() => {
  //   mountedRef.current = true;
  //   new AutoNumeric(ref.current as HTMLElement)

  //   return () => {
  //     mountedRef.current = false;
  //   }
  // }, [])



  return (
    <Controller
      name={name}
      control={control}

      render={({ field, fieldState: { error } }) => (
        <>
          <TextField
            {...field}
            autoComplete="off"
            fullWidth error={!!error}
            helperText={error?.message}
            onFocus={() => { (watch(name) == '0') && setValue(name, '') }}
            onBlur={() => { (watch(name) == '') && setValue(name, '0') }}
            {...other}
            inputProps={{ min: 0, max: 5, style: { textAlign: 'right' } }}
            InputProps={{
              inputComponent: MoneyFormat as any,
              endAdornment: endAdornment,

            }}

          />
        </>
      )}
    />
  );
}
