import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { errorMessageFor, isValidName } from '../../validators'
import { Value } from '../typings'
import { InputProps } from '../inputs/typings'
import { InputState } from '../inputs/InputState'
import { ObserverInput } from '../inputs'

@observer
class NamePlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['firstName', 'middleName', 'lastName'].includes(props.type)
  }

  // used by state
  static defaultState = (state: InputState) => {
    const validator = (value: Value) =>
      isValidName(value as string) || errorMessageFor('name')
    switch (state.type as string) {
      case 'firstName':
        return {
          propertyName: 'firstName',
          'data-qa': 'qa-first-name',
          autocomplete: 'given-name',

          // @todo animated placeholder
          label: 'First Name',
          // placeholder: 'First Name...',

          required: true,
          validator,
        }
      case 'middleName':
        return {
          propertyName: 'middleName',
          'data-qa': 'qa-additional-name',
          // @todo animated placeholder
          label: 'M.I.',
          // placeholder: 'Middle Name...',
          autocomplete: 'additional-name',
          dataQa: 'qa-additional-name',
          required: false,
          validator,
        }
      case 'lastName':
        return {
          propertyName: 'lastName',

          // @todo animated placeholder
          label: 'Last Name',
          // placeholder: 'Last Name...',

          dataQa: 'qa-last-name',
          autocomplete: 'family-name',
          required: true,
          validator,
        }
    }
  }

  render() {
    const { ref, ...props } = this.props
    return (
      <ObserverInput
        {...props}
        // labelText?
        label={props.state.label}
        type="text"
        minLength={1}
        pattern="[a-zA-Z0-9]+"
      />
    )
  }
}

export { NamePlugin }
export default NamePlugin