import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import {Nav, Navbar} from "react-bootstrap";
import LoginForm from './LoginForm.js';
import MovementsPage from './Movements.js';
import BadgePage from './Badge.js';
import LogoffPage from './Logoff.js';

class IndexPage extends React.Component {
    constructor(props) {
        super(props);

        this.state = {loggedIn: props.loggedIn};
    }

    componentDidMount() {
        fetch(this.props.targetUrl + '/status', {credentials: 'include'})
            .then(response => response.json())
            .then(data => this.setState({loggedIn: data.logged_in}))
            .catch(error => {console.log(error)});
    }

    render() {
        return (
            <Router>
            <Navbar bg="light" expand="lg">
            <Navbar.Brand href="/">BotZ</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="mr-auto">
            <Nav.Item>
            <Nav.Link as='div' eventKey="login">
            <Link to='/login'>Login</Link>
            </Nav.Link>
            </Nav.Item>
            <Nav.Item>
            <Nav.Link as='div' eventKey="movements">
            <Link to='/movements'>Movements</Link>
            </Nav.Link>
            </Nav.Item>
            <Nav.Item>
            <Nav.Link as='div' eventKey="badge">
            <Link to='/badge'>Badge</Link>
            </Nav.Link>
            </Nav.Item>
            <Nav.Item>
            <Nav.Link as='div' eventKey="logout">
            <Link to='/logout'>Logout</Link>
            </Nav.Link>
            </Nav.Item>
            </Nav>
            </Navbar.Collapse>
            </Navbar>
            <div>
            <Switch>
            <Route path="/login" component={() => <LoginForm targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
            <Route path="/movements" component={() => <MovementsPage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
            <Route path="/badge" component={() => <BadgePage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
            <Route path="/logout" component={() => <LogoffPage targetUrl={this.props.targetUrl} loggedIn={this.state.loggedIn} />} />
            </Switch>
            </div>
            </Router>
        );
    }
}

export default IndexPage;