import React from 'react'
import { isFunction } from 'exotic'
import { observer } from 'xmobx/mobx-react'
import { ObservableForm } from 'src/forms'
import { FormStateCard } from './FormState'
import { wording } from './fixture'
import { StyledPrimaryButton, SignUpFormWrapper } from './styled'

const formStateCard = new FormStateCard()

class FormButton extends React.PureComponent {
  render() {
    return (
      <StyledPrimaryButton {...this.props} data-qa={'qa-submit-form-button'} />
    )
  }
}

@observer
class SignUpForm extends ObservableForm {
  static FormState = formStateCard
  SubmitButton = FormButton
  defaultSubmitButtonLabel = wording.submitButton

  static defaultProps = {
    state: formStateCard,
  }
  handleSubmit = event => {
    const { onSignUpClick } = this.props
    event.preventDefault()
    if (this.validateForm()) {
      if (isFunction(onSignUpClick)) {
        const changeArgs = { event }
        onSignUpClick(this.state)
      }
    }
  }
}

class SignUpFormView extends React.PureComponent {
  render() {
    return (
      <SignUpFormWrapper>
        <SignUpForm {...this.props} />
      </SignUpFormWrapper>
    )
  }
}

export { SignUpFormView }
export default SignUpFormView