import React from 'react'
import { isFunction, isSafe, isArray } 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
    }
  }

  onPrefil(inputState: InputState) {
    const { value } = this.props
    if (inputState.type === 'textarea' && isSafe(value)) {
      inputState.setValue(value)
    }
  }

  componentWillMount() {
    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