import { FormControl, FormLabel, TextField } from '@mui/material';

import {
  FieldErrors,
  FieldValues,
  Path,
  UseFormRegister,
} from 'react-hook-form';

interface InputTextProps<T extends FieldValues> {
  register: UseFormRegister<T>;
  errors?: FieldErrors<T>;
  type: string;
  field: Path<T>;
  label: string;
  helpText: string;
  placeHolder?: string;
  multiline?: boolean;
  rows?: number;
  required?: boolean;
}

const InputText = <T extends FieldValues>({
  register,
  errors,
  type,
  field,
  label,
  helpText,
  placeHolder,
  rows,
  multiline,
  required,
}: InputTextProps<T>) => {
  return (
    <FormControl>
      <FormLabel htmlFor={field}>{label}</FormLabel>
      <TextField
        {...register(field as Path<T>, { required: required ?? true })}
        error={!!errors?.[field]}
        helperText={errors?.[field] ? helpText : ''}
        id={field}
        type={type}
        name={field}
        placeholder={placeHolder}
        autoFocus
        required={required ?? true}
        fullWidth
        variant='outlined'
        color={errors?.[field] ? 'error' : 'primary'}
        sx={{ ariaLabel: label }}
        multiline={multiline}
        rows={rows}
      />
    </FormControl>
  );
};

export default InputText;
