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

class TextAreaInput extends InputChain {
  static isSatisfiedByProps(props): boolean {
    return props.type === 'textarea'
  }

  validate(): void {
    console.log('TextAreaInput_validate')

    const { maxLength, minLength } = this.entries()
    const value = this.getValue()

    // as long as we configured one
    if (maxLength || minLength) {
      this.isValid = validators.isValidLength(value, minLength, maxLength)
    }
  }

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

    const attributes = {
      ...props,
      state,
      onChange: event => {
        this.setValue(event.target.value)
        this.validate()
      },
    }
    return <TextArea {...attributes} />
  }
}

export { TextAreaInput }
export default TextAreaInput