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

/**
 * @see https://www.google.com/search?q=longest+city+name+in+world
 */
@observer
class CityPlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['city'].includes(props.type)
  }
  static defaultState = (inputState: InputState) => {
    return {
      label: 'City',
      tooltip: '☑',
      validator: (value: Value) =>
        isValidCity(value as string) || errorMessage('city'),
    }
  }

  render() {
    return (
      <ObserverInput
        data-qa="qa-city"
        type="text"
        placeholder="San Francisco"
        minLength={2}
        maxLength={85}
        pattern="[A-Za-z0-9\s]+"
        // city address-level2
        autoComplete="address-level2"
        required={true}
        {...this.props}
      />
    )
  }
}

export { CityPlugin }
export default CityPlugin