import React, {Component} from 'react';
import { withStyles } from 'material-ui/styles';
import classNames from 'classnames';
import { Link } from 'react-router-dom'
import UserRegisterComponent from '../Components/UserRegisterComponent'
import UserListComponent from '../Components/UserListComponent'
import axios from 'axios';
import { withRouter } from 'react-router-dom'

const styles = {


};


class UserPage extends Component{
  state = {
    userInfoList: [],
  }

  onRegisterSubmit = (event)=> {
    event.preventDefault();
    const username =event.target.username.value;
    const firstName =event.target.firstName.value;
    const lastName =event.target.lastName.value;
    const password =event.target.password.value;
    const userRoleId =event.target.userRoleId.value;
    const  objectForSend={
             firstName,
              username,
              lastName,
              password,
              userRoleId
            };
     axios.post('http://localhost:4000/users', objectForSend )
   .then((response)=> {
     console.log("onSucces");
     this.users()
   })
   .catch(function (error) {
     console.log(error);
   });

  }
  users=()=>{
    console.log(this.state);
    axios.get('http://localhost:4000/users')
    .then(resp=>{
      console.log(this.state);
      this.setState({userInfoList:resp.data},()=>{
        console.log(this.state);
      });
    }).catch(err=>{
      console.log(err);
    });
  }
 // users = ()=> {
 //      console.log("Intra in showUsers");
 //     axios.get('http://localhost:4000/users' )
 //   .then(function (response) {
 //     console.log("response",response);
 //     this.setState({userInfoList:response.data},()=> console.log('asd'))
 //   })
 //   .catch(function (error) {
 //     console.log(error);
 //   });
 //  }

 render() {

  return (
      <center>
    <div >

  <UserRegisterComponent onRegisterUserSubmit = {this.onRegisterSubmit} />
  <UserListComponent/>

    </div>
      </center>

  );
}
}


export default withStyles(styles)(withRouter(UserPage));