import InputAdornment from '@material-ui/core/InputAdornment'
import React, {FC} from 'react'
import {email} from 'redux-form-validators'
import {composeValidators} from '../lib/Field'
import type {TextFieldProps} from '../lib/TextFieldBase'
import {TextField} from '../TextField'

export const EmailField: FC<TextFieldProps> = ({
  label = 'Email',
  required,
  validate,
  ...props
}) => {
  const emailValidate = email({allowBlank: !required})
  return (
    <TextField
      {...props}
      type="email"
      label={label}
      required={required}
      validate={validate ? composeValidators([emailValidate, validate]) : emailValidate}
      endAdornment={<InputAdornment position="end">@</InputAdornment>}
    />
  )
}
export default EmailField