import React from 'react'
import TextBox from 'src/inputs/TextBox'
import { AutoSuggest } from 'organisms/GoogleAutoComplete'
import { isValid } from 'src/forms/deps/isValid'
import { InputChain } from '../../InputChain'

/**
 * @todo 1. split to address plugin + autosuggest google plugin
 * @todo @see https://www.the-art-of-web.com/html/html5-form-validation/ (price, long-lat)
 * @see @wcag https://www.w3.org/WAI/tutorials/forms/validation/
 *
 * https://css-tricks.com/form-validation-ux-html-css/
 * ## parse & validate
 * https://github.com/mkoryak/address-validator
 * https://github.com/DamonOehlman/addressit note - this one is similar to what we did in bootstrapper/google/ originally
 * https://www.htmlgoodies.com/beyond/javascript/parsing-building-and-street-fields-from-an-address-using-regular-expressions.html
 */

class AutoSuggestInput extends InputChain {
  static isSatisfiedByProps(props): boolean {
    return props.type === 'googleAutoSugggest'
  }
  validate(): void {
    console.dev('AutoSuggestInput_validate')

    const state = this.get('state')
    // @@todo when w hav
    // this.isValid = validators.isValid(state.value, state.validationType)
    this.isValid = isValid(state.value, state.validationType)
  }

  render() {
    const state = this.get('state')
    const props = this.get('props')

    console.log('AutoSuggestInput_render', props)

    // this should be moved as part of the component
    const attributes = {
      ...props,
      state,
      onChange: value => {
        state.value = value
      },
      onBlur: value => {
        this.validate()
      },
    }
    return <TextBox {...attributes} />
    // return AutoSuggest once it is fixed
    // return <AutoSuggest {...attributes} />
  }
}

export { AutoSuggestInput }
export default AutoSuggestInput