import React, {Component, useState, useEffect} from 'react';

import './../assets/css/Login.css';
import FacebookLogin from 'react-facebook-login';
import GoogleLogin from 'react-google-login';

class Login extends Component {

state = {
isLoggedIn: false,
userID: "",
name: "",
email: "",
picture: ""
};

responseFacebook = response => {

// console.log(response);

this.setState({
isLoggedIn: true,
userID: response.userID,
name: response.name,
email: response.email,
picture: response.picture.data.url
});
};

constructor(props){
super(props);
this.state = {
foo: [],
activePage:15
};
this.handlePageChange=this.handlePageChange.bind(this);

handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
}

componentDidMount() {
fetch('/users')
.then(res => res.json())
.then(foo => this.setState({ foo: foo }));
};

render(){
const responseFacebook = (response) => {
this.setState({
isLoggedIn: true,
userID: response.userID,
name: response.name,
email: response.email,
picture: response.picture.data.url
});
 }

const responseGoogle = (response) => {

console.log(response);
}

return (
<div class="container-fluid emboss">
<div class="row">
<div id="divKiri" class="col-md-6 mb-3
mb-md-0">
<h3 class="text-center">Selamat
Datang di Hobit</h3>
<img class="img-responsive center-
block" src={require('./../assets/images/Asset2.png')} alt="" />
</div>

<div class="seperator"></div>

<div id="divKanan" class="col-md-6

divBg">
<img class="img-responsive center-
block" src={require('./../assets/images/logo.png')} alt="" />

<form class="col-md-9 col-md-

offset-2">

<div class="inputWithIcon">
<input class="form-control
cssTextbox" id="input-contacts-02" type="text" placeholder="Username" />
<i class="fa fa-user fa-lg
fa-fw" aria-hidden="true"></i>
</div>

<div class="inputWithIcon">
<input class="form-control
cssTextbox" id="input-contacts-02" type="password" placeholder="Password" />
<i class="fa fa-lock fa-lg
fa-fw" aria-hidden="true"></i>
</div>

<br/>
<br/>
<br/>
<button class="btn btn-
primary btn-block btn-rounded" type="submit">
Masuk
</button>

<br/>
<br/>
<p class="text-center">
Tidak punya akun ? <font
color="blue">Daftar Baru</font>
</p>
 <br/>
<div class="strike">

<span><b><i>atau</i></b></span>
</div>
<br/>
<p class="text-center">
Masuk dengan Jejaring
sosial
</p>
<br/>
<div class="col-md-6">
<FacebookLogin
appId="1084333925098585"
autoLoad={false}
fields="name,email,picture"
cssClass="loginBtn loginBtn--
facebook"
textButton="Facebook"

callback={responseFacebook} />
</div>
<div class="col-md-6">
<GoogleLogin

onSuccess={responseGoogle}

onFailure={responseGoogle}
buttonText="Google"
className="loginBtn
loginBtn--google"
render={renderProps
=> (
<button onClick={renderProps.onClick} className="loginBtn loginBtn--google"
disabled={renderProps.disabled}>Google</button>
)}
/>
</div>

</form>
</div>
</div>
</div>
)
}
}

export default Login;