import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import fetch from 'node-fetch';

import NavigationBar from './navigation/NavigationBar';
import ServerSelection from '../pages/ServerSelection';
import ManageServer from '../pages/ManageServer';
import CommandsList from '../pages/CommandsList';

export default class App extends Component {
    state = {
        loading: true,
        user: null
    }
    
    componentDidMount() {
        fetch('http://localhost:8088/oauth/details', {
            credentials: 'include'
        })
        .then(res => res.json())
        .then(res => {
            if (!res) return this.setState({ loading: false });
            this.setState({
                loading: false,
                user: res
            });
        })
        .catch(() => this.setState({ loading: false }));
    }
    
    render() {
        if (this.state.loading) {
            return(
                <React.Fragment>
                    <div className="container">
                        <NavigationBar user="Loading" />
                    </div>
                </React.Fragment>
            );
        } else if (!this.state.user) {
            window.location.replace('http://localhost:8088/oauth/login'); // OAuth2...
            return (<React.Fragment />);
        } else {
            return(
                <React.Fragment>
                    <Router>
                        <div className="container">
                            <NavigationBar user={this.state.user} />
                            
                            <br />
                            
                            <Route exact path="/dashboard" render={(props) => <ServerSelection {...props} user={this.state.user} /> } />
                            <Route exact path="/server/:id" render={(props) => <ManageServer {...props} user={this.state.user} /> } />
                            <Route exact  path="/commands" render={(props) => <CommandsList {...props} user={this.state.user} /> } />
                            
                            <br />
                        </div>
                    </Router>
                </React.Fragment>
            );
        }
    }
}