import React from 'react'
import { isUndefined } from 'exotic'
import TextBox from 'src/inputs/TextBox'
import { validators } from 'src/forms/deps/_validators'
import { InputChain } from 'src/forms/input/InputChain'

// I think this has everything needed to try
// THIS IS NOT A REACT COMPONENT, BUT BABEL IS HIJACKING IT...
class TextBoxInput extends InputChain {
  // 1. checking if it is the right one
  // ^ this means nobody ever has to change ObserverInput
  // ... it's externally configurable by anyone in a standard pattern :-)
  static isSatisfiedByProps(props): boolean {
    const typesSupported = ['text', 'confirmPassword', 'telephone']
    // isUndefined(props.type) --> setting the default type as text when the inputType is undefined
    return (
      isUndefined(props.type) ||
      typesSupported.includes(props.type) ||
      (props.identity !== 'SecurityCode' && props.type === 'password')
    )
  }

  validate = () => {
    console.dev('TextInput_validate')
    const state = this.get('state')
    const props = this.get('props')

    /**
     * !!!!!!!!
     * @note - this uses props.validationType while the others use state
     */
    this.isValid = validators.isValid(state.value, props.validationType)
  }

  render() {
    const props = this.get('props')
    console.log('TextInput_render', props)

    const attributes = {
      ...props,
      // state: this.state,
      // onChange: value => {
      //   this.state.value = value
      // },
      // onBlur: value => {
      //   this.validate()
      // },
    }
    return <TextBox {...attributes} />
  }
}

export { TextBoxInput }
export default TextBoxInput