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

class FormStateCard extends FormState {
  inputsList = inputList
}

const formStateCard = new FormStateCard()

const SubmitButtonComponent = props => {
  return <StyledSubmitButton {...props} />
}
const CancelButtonComponent = props => {
  return <StyledCancelButton {...props} />
}

class Form extends ObserverForm {
  static FormState = formStateCard

  isCancelButtonNeeded = true
  SubmitButton = SubmitButtonComponent
  CancelButton = CancelButtonComponent

  static defaultProps = {
    state: formStateCard,
  }

  componentWillUpdate() {
    const {
      submitButtonLabel,
      cancelButtonLabel,
      submitButtonDataQa,
      cancelButtonDataQa,
      placeHolder,
      textAreaDataQa,
    } = this.props

    this.defaultSubmitButtonLabel = isSafe(submitButtonLabel)
      ? submitButtonLabel
      : wording.submitLabel
    this.defaultCancelButtonLabel = isSafe(cancelButtonLabel)
      ? cancelButtonLabel
      : wording.cancelLabel
    this.submitDataQa = submitButtonDataQa
    this.cancelDataQa = cancelButtonDataQa

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

    const passThroughProps = {
      placeholder: isSafe(placeHolder) ? placeHolder : wording.placeholderText,
      dataQa: textAreaDataQa,
    }

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

  handleSubmit = (event: Event) => {
    const { onSubmit } = this.props
    event.preventDefault()
    if (this.validateForm()) {
      if (isFunction(onSubmit)) {
        onSubmit(this.state)
      }
    }
  }
  handleCancel = (event: Event) => {
    const { onCancel } = this.props
    event.preventDefault()
    if (isFunction(onCancel)) {
      onCancel(this.state)
    }
  }
}

class FormComponent extends React.Component<CommentBoxProps> {
  render() {
    const { className, dataQa } = this.props
    const passThroughProps = {
      className,
      'data-qa': dataQa,
    }
    return (
      <FormWrapper {...passThroughProps}>
        <Form {...this.props} />
      </FormWrapper>
    )
  }
}

export { FormComponent, SubmitButtonComponent, CancelButtonComponent }
export default FormComponent