import React, { Component } from 'react';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';

class Register extends Component {

  constructor(props){

    super(props);

    this.state = {
    username: '',
    password: '',
    age: '',
    famille: '',
    race: '',
    nourriture: ''
    };

    this.handleSubmitRegister = this.handleSubmitRegister.bind(this);
    this.handleChangeUsername = this.handleChangeUsername.bind(this);
    this.handleChangePassword = this.handleChangePassword.bind(this);
    this.handleChangeAge = this.handleChangeAge.bind(this);
    this.handleChangeFamille = this.handleChangeFamille.bind(this);
    this.handleChangeRace = this.handleChangeRace.bind(this);
    this.handleChangeNourriture = this.handleChangeNourriture.bind(this);
  }

  handleChangeUsername(event) {
    this.setState({
      username: event.target.value
    });
  }

  handleChangePassword(event) {
    this.setState({
      password: event.target.value
    });
  }

  handleChangeAge(event) {
    this.setState({
      password: event.target.value
    });
  }
  handleChangeFamille(event) {
    this.setState({
      password: event.target.value
    });
  }
  handleChangeRace(event) {
    this.setState({
      password: event.target.value
    });
  }
  handleChangeNourriture(event) {
    this.setState({
      password: event.target.value
    });
  }

  handleSubmitRegister(event){

    event.preventDefault();

    const url = "/users";

    const data = {
    username: this.state.username,
    password: this.state.password
    }

    axios.post(url, { data })
    alert('register with success');
    this.props.history.push('/connection');
  }

  render() {
    return(
      <div className="register">
        <h1>Register</h1>
        <form id="fields" onSubmit={this.handleSubmitRegister}>
          <input class="form-control form-control-lg" type="text" value={this.state.username} onChange={this.handleChangeUsername} placeholder="Username" />
          <input class="form-control form-control-lg" type="password" name="password" value={this.state.password} onChange={this.handleChangePassword} placeholder="Password" />
          <input class="form-control form-control-lg" type="number" value={this.state.age} onChange={this.handleChangeAge} placeholder="Age" />
          <input class="form-control form-control-lg" type="text" value={this.state.famille} onChange={this.handleChangeFamille} placeholder="Famille" />
          <input class="form-control form-control-lg" type="text" value={this.state.race} onChange={this.handleChangeRace} placeholder="Race" />
          <input class="form-control form-control-lg" type="text" value={this.state.nourriture} onChange={this.handleChangeNourriture} placeholder="Nourriture" />

          <input class="btn btn-outline-primary" type="submit" value="Register" name="sub" />
        </form>
      </div>
    );
  }
}

export default Register;