import { TextFieldProps as MuiTextFieldProps } from '@mui/material'
import React from 'react'
import { Controller } from 'react-hook-form'
import { TextField } from '../Input'

type MyTextFieldProps = MuiTextFieldProps & {
  control: any
  label?: string
  name: string
  required?: boolean
}

export default function FormTextField({
  name,
  control,
  label,
  required,
  onChange,
  value,
  ...rest
}: MyTextFieldProps) {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field, fieldState: { error } }) => (
        <TextField
          name={name}
          label={label}
          onChange={onChange ?? field.onChange}
          value={value ?? field?.value}
          required={required}
          error={error ? true : false}
          helperText={error ? error.message : null}
          {...rest}
        />
      )}
    />
  )
}
