import { FC } from 'react';
import { useFormContext, Controller } from 'react-hook-form';

import TextField from '@material-hu/mui/TextField';

export type TextFieldNumberControlProps = {
  name: string;
  label: string;
  defaultValue: string | number;
  sx?: any;
};

export const TextFieldNumberControl: FC<
  TextFieldNumberControlProps
> = props => {
  const { name, label, defaultValue, sx } = props;

  const { control } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      defaultValue={defaultValue}
      render={({ field }) => (
        <TextField
          {...field}
          label={label}
          type="number"
          inputProps={{ min: 0 }}
          sx={{
            minWidth: '220px',
            height: '40px',
            '& fieldset': {
              borderRadius: '4px',
            },
            '& input': {
              py: 1.2,
            },
            '& label': {
              top: '-5px',
            },
            ...sx,
          }}
        />
      )}
    />
  );
};

export default TextFieldNumberControl;