import React from 'react';
import LateralMenu from '../../components/LateralMenu';

const style = {
  'font-size':'16px',
}

class Users extends React.Component {

constructor() {
    super();
         this.state = {
items: [],
username: '',
email: '',
password: ''
};
console.log(this.state)
  }
  componentDidMount() {

	    	fetch('http://localhost:3000/api/users')
	        .then(result => result.json())
	        .then(items => {this.setState({items});
        });
}

onInputChange (property, e) {
    this.setState({
      [this.state[property]]: e.target.value
    });
}

onSubmit (e) {
  fetch (`http://localhost:3000/api/users/create/${this.state.username}/${this.state.email}/${this.state.password}`, {
    method: 'POST'
  })
}


  render() {

     return (
      <div>
<LateralMenu/>
<div className="main">

<button type="button" className="btn btn-info btn-lg pull-right" data-toggle="modal" data-target="#myModal">New User</button>

<div id="myModal" className="modal fade" role="dialog">
  <div className="modal-dialog">


    <div className="modal-content">
      <div className="modal-header">
        <h4 className="modal-title">Add New User</h4>
      </div>
      <div className="modal-body">


                       <form className="form-horizontal" onSubmit={this.onSubmit.bind(this)} id="create">

  <p><input type="text" className="form-control" required placeholder="Username" onChange={this.onInputChange.bind(this, 'username')}/></p>
<p><input type="text" className="form-control" required placeholder="Email" onChange={this.onInputChange.bind(this, 'email')}/></p>
<p><input type="text" className="form-control" required placeholder="Password" onChange={this.onInputChange.bind(this, 'password')}/></p>


		</form>

      </div>
      <div className="modal-footer">
        <button type="submit" form="create" className="btn btn-success">Create</button>
        <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>


<table className="table table-striped">
    <thead>
      <tr>
        <th>Username</th>
         <th>Email</th>
        <th>Registered Date</th>
        <th>Options</th>
      </tr>
    </thead>
    <tbody>

          {this.state.items.length ?
            this.state.items.map(item=>

      <tr>
        <td>{item.username}</td>
        <td><a href={'mailto:' + item.email}>{item.email}</a></td>
        <td>{item.date}</td>
        <td><a href="#"><b>Edit</b></a> | <a className="red" href="#">Delete</a></td>
      </tr>

                )
            : <li>Loading...</li>
          }

      </tbody>
  </table>
</div>



      </div>

     );

  }
}

export default Users;