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,
            justLoggedOut: 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,
            justLoggedOut: true,
        })
        // return <Redirect to="/" />
    }
    handleJustLoggedOut = () => {
        // this.setState({
        //     justLoggedOut: false
        // })
        console.log(123);
    }
    render() {
        // return this.state.isLogin ?
        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="/" render={() => {
                            this.setState({
                                justLoggedOut: false
                            })
                            return (<Home />)
                        }} exact/>
                        <Route path="/contact" component={Contact} />
                        <Route path="/member" render={()=> (
                            this.state.isLogin ?
                                <Member handleLogout={this.handleLogout} username={this.state.username} /> :
                                this.state.justLoggedOut ? <Redirect to="/" /> :
                                    <FormLogin handleLogin={this.handleLogin}/>
                        )}/>
                        <Route component={NoPage} />
                    </Switch>
                    { this.state.showError ? <Error /> : ''}
                </div>
            </BrowserRouter>
         );
    }
}

export default Login;

{/* <Route exact path="/" render={() => (loggedIn ? (<Redirect to="/dashboard" />) : (<PublicHomePage />))} /> */}