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

@observer
class ZipCodePlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['zip', 'postal', 'postalCode', 'zipCode'].includes(props.type)
  }
  static defaultState = (inputState: InputState) => {
    return {
      label: 'Zip Code',
      tooltip: '☑',
      validator: (value: Value) => isValidZipCode(value as string),
    }
  }

  render() {
    return (
      <ObserverInput
        type="text"
        minLength={2}
        maxLength={16}
        required={true}
        placeholder="5555"
        // pattern="[A-Za-z0-9\.\-]+"
        autoComplete="postal-code"
        data-qa="qa-code"
        {...this.props}
      />
    )
  }
}

export { ZipCodePlugin }
export default ZipCodePlugin