import React, {Component} from 'react'
import {BrowserRouter, Redirect, Switch, Route} from 'react-router-dom'

import Navbar from './components/Navbar'
import Home from './components/Home'
import Contact from './components/Contact'
import NoPage from './components/NoPage'
import Member from './components/Member'
import FormLogin from './components/FormLogin'
import Error from './components/Error'

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogin: false,
            username: 'user',
            password: 'password',
            showError: false,
         }
    }

    handleLogin = (username, password) => {
        console.log('Login : '+ username, password);
        if(username === this.state.username && password === this.state.password) {
            this.setState({
                isLogin: true,
                showError: false
            })
        }else{
            this.setState({
                showError: true
            })
            console.log('Login Gagal');
        }
    }

    handleLogout = () => {
        console.log('logout')
        this.setState({
            isLogin: false
        })
        // window.location.href="/";
        return <Redirect to="/" />
    }
    render() {
        let mainStyle = {
            border: '1px solid #ccc',
            textAlign: 'center',
            paddingBottom: '20px',
            width:'77%',
            margin: '10px auto',
        }
        return (
            <BrowserRouter>
                <div style={mainStyle}>
                    <h1>Login with React</h1>
                    <Navbar></Navbar>
                    <Switch>
                        <Route path="/" component={Home} exact/>
                        <Route path="/contact" component={Contact} />
                        <Route path="/member" render={()=> {
                            return this.state.isLogin ?
                                <Member handleLogout={this.handleLogout} username={this.state.username} /> :
                                <FormLogin handleLogin={this.handleLogin}/>
                        }}/>
                        <Route component={NoPage} />
                    </Switch>
                    { this.state.showError ? <Error /> : ''}
                </div>
            </BrowserRouter>
         );
    }
}

export default Login;