import React from 'react'

export default class SignUp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      email: '',
      password: '',
      passVer: '',
      firstName: '',
      lastName: ''
    }
    this.updateEmailField = this.updateEmailField.bind(this)
    this.updatePassword = this.updatePassword.bind(this)
    this.updatePassVer = this.updatePassVer.bind(this)
    this.updateFN = this.updateFN.bind(this)
    this.updateLN = this.updateLN.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  updateEmailField(e) {
    this.setState({email: e.target.value})
  }

  updatePassword(e) {
    this.setState({password: e.target.value})
  }

  updatePassVer(e) {
    this.setState({passVer: e.target.value})
  }

  updateFN(e) {
    this.setState({firstName: e.target.value})
  }

  updateLN(e) {
    this.setState({lastName: e.target.value})
  }

  handleSubmit(e) {
    if (this.state.password !== this.state.passVer) {
      alert('Passwords ain\'t the same')
    } else {
    console.log(this.state)
    }
  }

  render() {
    return (<div>
      <h1>{JSON.stringify(this.state)}</h1>
      <form onSubmit={this.handleSubmit}>
        <input onChange={this.updateEmailField} placeholder='type your email here m8'/>
        <input type='password' onChange={this.updatePassword} placeholder='type your password'/>
        <input type='password' onChange={this.updatePassVer} placeholder='verify your password'/>
        <input type='text' onChange={this.updateFN} placeholder='Enter your first name'/>
        <input type='text' onChange={this.updateLN} placeholder='Enter your last name'/>
        <input type='submit' value='Submit'/>
      </form>
    </div>)
  }
}