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

function fromCountryToLabel(country: string) {
  switch (country) {
    case 'IN':
    case 'INDIA':
    case 'CA':
    case 'CANADA':
      return 'Province'
    case 'US':
    case 'USA':
      return 'State'
    default:
      return 'State / Province'
  }
}

/**
 * @see https://en.wikipedia.org/wiki/List_of_long_place_names
 */
@observer
class ProvincePlugin extends React.Component<InputProps> {
  static isSatisfiedByProps(props: { type: string }): boolean {
    return ['province', 'state', 'region'].includes(props.type)
  }
  static defaultState = (inputState: InputState) => {
    return {
      tooltip: '☑',
      validator: (value: Value) =>
        isValidProvince(value as string) || errorMessageFor('postalCode'),
    }
  }

  /** @description this dynamically changes province based on country */
  get label() {
    const formState = this.props.state.formState
    // minor perf here on dynamic forms is fine
    const countryState =
      isObj(formState) &&
      formState.get(inputState => (inputState.type as string) === 'country')
    const country = isObj(countryState) && countryState.value
    const label = fromCountryToLabel(country as string)
    return label
  }

  render() {
    return (
      <ObserverInput
        label={this.label}
        data-qa="qa-state"
        type="text"
        minLength={2}
        maxLength={24}
        required={true}
        placeholder="California"
        // pattern="[A-Za-z0-9\.\-]+"
        autoComplete="address-level1"
        {...this.props}
      />
    )
  }
}

export { ProvincePlugin }
export default ProvincePlugin