import React, { Component } from "react";
import {
  BrowserRouter
} from "react-router-dom";
import Navbar from "./components/navigation";
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import {
  Route, Switch
} from "react-router-dom";
import Login from './components/login/login';

import CreateAccount from './components/login/createAccount';
import "./App.css";
import { Redirect } from "react-router-dom";

class ProtectedRoute extends Component {
  constructor(props) {
    super(props);
    this.state = { auth: null };
  }

  async componentWillMount() {
    const url = "/simcompanies/API/testlogin";
    const response = await fetch(url);
    if (response.status == "200") {
      this.setState({
        auth: true
      });
    } else {
      this.setState({
        auth: false
      });
    }
  }

  render() {
    const { component: Component, ...props } = this.props;
    return (
      this.state.auth === null ?
        "Loading..." :
        <Route
          {...props}
          render={props => (
            this.state.auth ?
              <Component {...props} /> :
              <Redirect to='/login' />
          )}
        />
    )
  }
}
class App extends Component {

  render() {
    const theme = createMuiTheme({
      palette: {
        primary: {
          main: "#0B1929",
          light: "#9daac1"
        },
        secondary: {
          main: "#FFC800",
          light: "#ffdf7b"
        }
      }
    })


    //change basename in browserrouter if uri changes
    return (
      <ThemeProvider theme={theme}>
        <BrowserRouter basename="/simcompanies">
          <Switch>
            <Route exact path="/login" component={Login} />
            <Route exact path="/login/createuser" component={CreateAccount} />
            <ProtectedRoute path="/*" component={Navbar} />
          </Switch>
        </BrowserRouter>
      </ThemeProvider>

    );
  }
}

export default App;