import React, { Component } from 'react'
import { reduxForm, Field } from 'redux-form'
import { Button, TextField } from '../../components'
import redeemTechDomainValidation from './redeemTechDomainValidation'

class RedeemTechDomainForm extends Component {
  buttonState() {
    const {
      submitting,
      invalid,
      status
    } = this.props

    if (invalid) {
      return "disabled"
    } else if (submitting) {
      return "loading"
    } else {
      return status
    }
  }

  render() {
    const { handleSubmit, style } = this.props

    return (
      <form style={style} onSubmit={handleSubmit}>
        <Field name="name" label="Your Name" placeholder="Arthur Dent" component={TextField} />
        <Field name="email" label="Email" placeholder="arthur@earth.com" component={TextField} />
        <Field name="requested_domain" label="Domain" placeholder="arthurdent.tech" component={TextField} />
        <Field name="secret_code" label="Secret Code" placeholder="Get from your club leader" component={TextField} />
        <Button type="form" state={ this.buttonState() }>
          Get your .TECH domain!
        </Button>
      </form>
    )
  }
}

export default reduxForm({
  validate: redeemTechDomainValidation,
  form: 'redeemTechDomainRedemption'
})(RedeemTechDomainForm)

@@ -96,16 +96,23 @@
  Button,
+ Emoji,
  TextFie
@@ -493,16 +493,327 @@
  %7D%0A  %7D%0A%0A
+  buttonText(status) %7B%0A    switch (status) %7B%0A    case %22error%22:%0A      return (%3Cspan%3ESomething went wrong! %3CEmoji type=%22thinking_face%22 /%3E%3C/span%3E)%0A    case %22success%22:%0A      return (%3Cspan%3EDomain requested! %3CEmoji type=%22fisted_hand_sign%22 /%3E%3C/span%3E)%0A    default:%0A      return %22Get your .TECH domain!%22%0A    %7D%0A    %0A  %7D%0A%0A
   render
@@ -848,16 +848,24 @@
 t, style
+, status
  %7D = thi
@@ -1427,38 +1427,43 @@
         
-Get your .TECH domain!
+%7B this.buttonText(status) %7D
 %0A       

Add user friendly success and error responses