/**
 * @see https://gist.github.com/keeguon/2310008
 * @todo ^ we can code split & load lazily the country list
 *
 * @see https://css-tricks.com/input-typecountry/
 */
import * as React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isValidCity } from 'src/validators'
import { Value } from '../../typings'
import { InputProps } from '../../inputs/typings'
import { InputState } from '../../inputs/InputState'
import { ObserverInput } from '../../inputs/ObserverInput'

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

  // used by state
  static defaultState = (inputState: InputState) => {
    return {
      label: 'Country',
      tooltip: 'attributes from the plugin static props!',
      validator: (value: Value) => isValidCity(value),

      // @todo not sure this is needed in the plugin, just the inputConfig...
      // attributes: {
      //   autocomplete: '',
      //   type: 'text',
      //   pattern: '[A-Za-z0-9]+',
      //   placeholder: 'Country...',
      // },
    }
  }

  render() {
    return (
      <>
        <datalist id="countries-datalist">
          <option value="CA" />
          <option value="USA" />
          <option value="IND" />
          <option value="RUS" />
          <option value="CHI" />
        </datalist>
        <ObserverInput
          data-qa="qa-country"
          type="text"
          placeholder="US"
          minLength={2}
          maxLength={2}
          pattern="[A-Za-z0-9]+"
          autoComplete="shipping country"
          list="countries-datalist"
          required={true}
          {...this.props}
        />
      </>
    )
  }
}

export { CountryPlugin }
export default CountryPlugin