import React from 'react'
import { Link } from 'react-router-dom'
import { withRouter } from 'react-router-dom'
import axios from 'axios';

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {email: '', password: ''};

    this.handleChange1 = this.handleChange1.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange1(event) {
    this.setState({email: event.target.value});
  }

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

  handleSubmit(event) {
    //alert('A email was submitted: ' + this.state.email);
    //alert('A password was submitted: ' + this.state.password);
    var apiBaseUrl = "http://tinman.cs.gsu.edu:5000/slate";
    var self = this;
    var payload = {
      "email":this.state.email,
      "password":this.state.password
    }
    axios.post(apiBaseUrl+'/authenticate', payload).then(function (response) {
      console.log(response);
      if (response.status === 200) {
        //alert(response.data.status);
        if (response.data.status) {
          self.props.history.push({
            pathname: '/mainmenu',
            state: {email: self.state.email}
          });
        }
        else {
          alert("Invalid credentials");
          self.props.history.push({
            pathname: '/'
          });
        }
      }
    })
    .catch(function (error) {
      console.log(error);
    });
    event.preventDefault();
  }

  render() {
    return (
      <div>
        <center>
        <h4>Slate Login</h4>
        <form onSubmit={this.handleSubmit}>
        <table>
          <tr>
          <td>Username:</td>
          <td><input type="text" value={this.state.email} onChange={this.handleChange1} /></td>
          </tr>
          <tr>
          <td>Password:</td>
          <td><input type="text" value={this.state.password} onChange={this.handleChange2} /></td>
          </tr>
          <tr>
          <td></td>
          <td><input type="submit" value="Submit" /></td>
          </tr>
        </table>
        <p />
        First time? <Link to="/register">Register</Link>
        </form>
        </center>
      </div>
    )
  }
}

export default withRouter(Login)