import React from 'react'
import { observer } from 'xmobx/mobx-react'
import { isFunction } from 'exotic'
import { wording } from 'src/words'
import { ObserverForm, FormState } from 'src/forms'
import { inputList } from './fixture'
import { StyledApproveButton, StyledRejectButton, Wrapper } from './styled'

class FormStateCard extends FormState {
  inputsList = inputList
}

const formStateCard = new FormStateCard()

class ApproveButton extends React.PureComponent {
  render() {
    return <StyledApproveButton {...this.props} />
  }
}
class RejectButton extends React.PureComponent {
  render() {
    return <StyledRejectButton {...this.props} />
  }
}

@observer
class FormCard extends ObserverForm {
  static FormState = formStateCard
  SubmitButton = ApproveButton
  isCancelButtonNeeded = true
  CancelButton = RejectButton
  defaultSubmitButtonLabel = this.props.buttonInformation.primaryButton
  defaultCancelButtonLabel = this.props.buttonInformation.secondaryButton

  static defaultProps = {
    state: formStateCard,
  }

  handleSubmit = event => {
    const { onApproveButtonClick } = this.props
    event.preventDefault()
    if (this.validateForm()) {
      if (isFunction(onApproveButtonClick)) {
        onApproveButtonClick(this.state)
      }
    }
  }
  handleCancel = event => {
    const { onRejectButtonClick } = this.props
    event.preventDefault()
    if (isFunction(onRejectButtonClick)) {
      onRejectButtonClick(this.state)
    }
  }
}

class Form extends React.PureComponent {
  render() {
    return (
      <Wrapper>
        <FormCard {...this.props} />
      </Wrapper>
    )
  }
}
export { Form }
export default Form