import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import { Form } from 'semantic-ui-react'
import { css } from 'glamor'

class NewHouseholdMemberForm extends Component {
  render() {
    const { handleSubmit } = this.props
    return (
      <Form onSubmit={handleSubmit}>
        <Form.Field>
          <label htmlFor="first_name">First Name</label>
          <Field name="first_name" component="input" type="text" />
        </Form.Field>
        <Form.Field>
          <label htmlFor="last_name">Last Name</label>
          <Field name="last_name" component="input" type="text" />
        </Form.Field>
        <Form.Field>
          <label htmlFor="email">Email</label>
          <Field name="email" component="input" type="text" />
        </Form.Field>
        <Form.Field>
          <label htmlFor="phone_number">Phone Number</label>
          <Field name="phone_number" component="input" type="text" />
        </Form.Field>
        <Form.Button primary>
          Create Member
        </Form.Button>
      </Form>
    )
  }
}

export default reduxForm({
  form: 'newHouseholdMember'
})(NewHouseholdMemberForm)

const styles = css({
  display: 'flex',
  flexWrap: 'wrap',
  alignItems: 'center',
  justifyContent: 'space-between',
  // maxWidth: '800px',
  marginBottom: '20px'
})

const ul = css({
  maxWidth: '800px',
  margin: '0 auto'
})

const styles2 = css({
  flex: '1 0 120px',
  maxWidth: '220px'
})

const styles3 = css({
  flex: '1 0 220px',
  padding: '15px',
  borderRadius: '15px',
  border: '2px solid gray',
  ':focus': {
    outline: 'none'
  }
})

const btnStyle = css({
  marginLeft: 'auto',
  padding: '8px 16px',
  border: 'none',
  background: '#333',
  color: '#f2f2f2',
  textTransform: 'uppercase',
  letterSpacing: '.09em',
  borderRadius: '2px'
})
@@ -992,27 +992,16 @@
 primary%3E
-%0A          
 Create M
@@ -1005,25 +1005,16 @@
 e Member
-%0A        
 %3C/Form.B
@@ -1134,667 +1134,4 @@
 rm)%0A
-%0Aconst styles = css(%7B%0A  display: 'flex',%0A  flexWrap: 'wrap',%0A  alignItems: 'center',%0A  justifyContent: 'space-between',%0A  // maxWidth: '800px',%0A  marginBottom: '20px'%0A%7D)%0A%0Aconst ul = css(%7B%0A  maxWidth: '800px',%0A  margin: '0 auto'%0A%7D)%0A%0Aconst styles2 = css(%7B%0A  flex: '1 0 120px',%0A  maxWidth: '220px'%0A%7D)%0A%0Aconst styles3 = css(%7B%0A  flex: '1 0 220px',%0A  padding: '15px',%0A  borderRadius: '15px',%0A  border: '2px solid gray',%0A  ':focus': %7B%0A    outline: 'none'%0A  %7D%0A%7D)%0A%0Aconst btnStyle = css(%7B%0A  marginLeft: 'auto',%0A  padding: '8px 16px',%0A  border: 'none',%0A  background: '#333',%0A  color: '#f2f2f2',%0A  textTransform: 'uppercase',%0A  letterSpacing: '.09em',%0A  borderRadius: '2px'%0A%7D)

Remove unused styling from NewHouseholdMemberForm