import React from 'react';

class SignUp extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
           email: '',
           password: '',
           username: '',
           name: ''
         };
         this.handleInputChange = this.handleInputChange.bind(this);
         this.handleOnSubmit = this.handleOnSubmit.bind(this);
      }
     handleInputChange(event) {
        this.setState({
          [event.target.name]: event.target.value
        });
     }
     handleOnSubmit(event) {
       event.preventDefault();
       const { email, password } = this.state;
       const userObj = {
         email,
         password,
         name
       }
      this.props.signIn(userObj);
     }
    render() {
       const {
          email,
          password,
          name,
          username
        } = this.state;
       return (
        <form onSubmit={this.handleOnSubmit}>
          <h4> Sign Up</h4>
          <input
            id="email"
            type="email"
            name="email"
            onChange={this.handleInputChange}
            className="validate"
            value={email}
           />
           <label htmlFor="email">Email</label>

           <input
             id="password"
             type="password"
             name="password"
             onChange={this.handleInputChange}
             className="validate"
             value={password}
            />
           <label htmlFor="password">Password</label>
           <input
             id="username"
             type="name"
             name="name"
             onChange={this.handleInputChange}
             className="validate"
             value={username}
            />
           <label htmlFor="username">Username</label>
            <input
             id="name"
             type="name"
             name="name"
             onChange={this.handleInputChange}
             className="validate"
             value={name}
            />
           <label htmlFor="password">Name</label>
           <button
             type="submit"
             name="action"
            >
            Submit
           </button>
       </form>


export default connect(null, { signUp })(SignUp);