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

@observer
class PostalCodePlugin 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: 'attributes from the plugin static props!',
      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="shipping postal-code"
          data-qa="qa-zip-code"
          {...this.props}
        />
      </>
    )
  }
}

export { PostalCodePlugin }
export default PostalCodePlugin