import React, {	Component } from 'react';
import axios from 'axios';
class Login extends Component {

	constructor(props) {
		super(props);
		this.state = {user: {email: '', password: ''}};

		this.handleChange = this.handleChange.bind(this);
		this.handleClick = this.handleClick.bind(this);
	}
	login(event) {
		console.log("Login");
		console.log(this.state.user);
		let config = {
			headers : {'x-authorization' : process.env.REACT_APP_API_KEY}
		};
		axios.post(process.env.REACT_APP_API_URL + '/api/loginPersonalTrainer',
		{
			email: this.state.user.email,
			password: this.state.user.password},
			config
			).then(response=>{
				console.log(response);
			}).catch(error => {
				console.log(error);
			});
		}
		handleChange(event) {
			let userCopy = this.state.user;
			switch(event.target.id) {
				case 'email':
				userCopy.email =  event.target.value;
				break;

				case 'password':
				userCopy.password =  event.target.value;

				break;
				default:
				break;
			}

			this.setState({ user:userCopy });

		}

		handleClick(event){
			event.preventDefault();
			switch(event.target.id) {
				case 'login':
				this.login();
				break;
				default:
				break;
			}
		}
		render(){
			return (
				<main className="page-content">
				<div className="page-inner">
				<div id="main-wrapper">
				<div className="row">
				<div className="col-md-3 center">
				<div className="login-box">
				<a href="index.html" className="logo-name text-lg text-center">PTGuide</a>
				<p className="text-center m-t-md">Please login into your account.</p>
				<form className="m-t-md">
				<div className="form-group">
				<input type="text" className="form-control" placeholder="Your email" id="email" value={this.state.user.email} onChange={this.handleChange}/>
				</div>
				<div className="form-group">
				<input type="password" className="form-control" id="password" placeholder="Your password" value={this.state.user.password} onChange={this.handleChange}/>
				</div>
				<button className="btn btn-success btn-block" id="login" onClick={this.handleClick}>Login</button>
				<a href="forgot.html" className="display-block text-center m-t-md text-sm">Forgot Password?</a>
				<p className="text-center m-t-xs text-sm">Do not have an account?</p>
				<a href="/register" className="btn btn-default btn-block m-t-md">Create an account</a>
				</form>
				<p className="text-center m-t-xs text-sm">2015 &copy; Modern by Steelcoders.</p>
				</div>
				</div>
				</div>
				</div>
				</div>
				</main>
				);
		}
	}

	export default Login;