import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import '../App.css';
import EmployeePanel from './EmployeePanel';
import AdminPanel from './AdminPanel';

class LoginPanel extends Component {
    constructor() {
        super();
        this.state = {
		formControls: {
			username: { value:''},
			password: { value:''}
		},
	  logged:false
    };
    this.changeHandler = this.changeHandler.bind(this);
    }



	changeHandler = event => {
   const name = event.target.name;
	const value = event.target.value

	this.setState({
	formControls: {
		[name]: value
	}
  });
}
loggedUser;

componentWillMount() {
    this.loggedUser = localStorage.getItem('loggedUser');
}

componentDidMount() {
   // ReactDOM.findDOMNode(this.state.formControls.username).focus();
}

login() {
    fetch(`https://localhost:44306/api/employee?username=${encodeURIComponent(this.state.formControls.username.value)}&password=${encodeURIComponent(this.state.formControls.password.value)}`,
			{ method:"GET"})
        .then(response => response.json())
        .then(data => console.log(data));//this.setState({ data }));
    this.setState({logged: true});
}

loggedIn() {
    if(this.loggedUser){
        return true;
    }
    return false;
}

render() {
    return this.state.logged ?
    <Router render={EmployeePanel.render} >
      <Switch>
            <Route path="/employeepanel" component={EmployeePanel}/>
            <Redirect to='/employeepanel' />}
 </Switch>
    </Router> :
    <Router>
        <div className="App">
        <header className="App-header">
                <div>
                <h2>System do rezerwacji urlopów</h2>
                </div>
                <div className="App-content">
                <div className="App-panel">
                    <h3>Wprowadź dane logowania</h3>
                    Nazwa użytkownika: <br/>
                    <input type="text" name="username" value={this.state.formControls.username.value} onChange={this.changeHandler}/>
                    <br/><br/>
                    Hasło: <br/>
                    <input type="password" name="password" value={this.state.formControls.password.value} onChange={this.changeHandler}/>
                    <br/><br/>
                    <button onClick={() => this.login()}>Zaloguj się</button>
                </div>
                </div>
            </header>
        </div>
    </Router>
    }
}

export default LoginPanel;