import React from 'react'
import { isFunction, isSafe } from 'exotic'
import { FormState, ObserverForm } from 'src/forms'
import { CommentBoxProps } from '../typings'
import { wording, inputList } from './fixture'

class FormStateCard extends FormState {
  inputsList = inputList
}

const formStateCard = new FormStateCard()

class Form extends ObserverForm<CommentBoxProps> {
  constructor(props) {
    super(props)
    this.state = new FormStateCard()
  }

  isSubmitButtonNeeded = false

  static defaultProps = {
    state: formStateCard,
  }

  handleBlur = event => {
    const { onTextAreaBlur, identifier } = this.props
    if (isFunction(onTextAreaBlur)) {
      onTextAreaBlur({...this.state, identifier})
    }
  }

  onInputInit = inputState => {
    if (inputState.name === 'commentBox') {
      inputState.onBlur = this.handleBlur
    }
  }

  componentWillUpdate() {
    const {
      placeHolder,
      textAreaDataQa,
    } = this.props

    const inputList = this.state.get('commentBox')

    const passThroughProps = {
      placeholder: isSafe(placeHolder) ? placeHolder : wording.placeholderText,
      'data-qa': textAreaDataQa,
    }

    Object.keys(passThroughProps).forEach(key => {
      inputList[key] = passThroughProps[key]
    })
  }

export { Form }
export default Form