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

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

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

  render() {
    return (
      <ObserverInput
        required={true}
        minLength={4}
        pattern="[+()0-9]+"
        placeholder="1250..."
        {...this.props}
        type="tel"
        autoComplete="tel"
        dataQa="qa-telephone"
      />
    )
  }
}

export { TelephonePlugin }
export default TelephonePlugin