/**
 * @todo @anto @sriaarthi
 * @todo renderIcon before @mohan
 */
import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { errorMessageFor, isValidEmail } from '../../validators'
import { Value } from '../typings'
import { InputProps } from '../inputs/typings'
import { InputState } from '../inputs/InputState'
import { ObserverInput } from '../inputs/ObserverInput'

@observer
class EmailPlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['email'].includes(props.type)
  }

  // used by state
  static defaultState = (inputState: InputState) => {
    return {
      validator: (value: Value) =>
        isValidEmail(value as string) || errorMessageFor('email'),
    }
  }

  render() {
    return (
      <ObserverInput
        label="Email"
        data-qa="qa-email"
        required={true}
        minLength={4}
        maxLength={254}
        pattern="((.*)\@(.*)\.(.*))"
        placeholder="you@skava.com..."
        // ^ will be overwritten by props
        {...this.props}
        type="email"
        autoComplete="email"
      />
    )
  }
}

export { EmailPlugin }
export default EmailPlugin