/* eslint-disable */
import React, { Component } from "react";
import "./App.css";

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from "./components/layout/NavBar";
import jwtDecode from "jwt-decode";

// Redux
import { Provider } from "react-redux";
import store from "./redux/store";
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
import themeObject from './util/theme';
import { SET_AUTHENTICATED } from './redux/types';
import { logoutUser, getUserData } from './redux/actions/userActions';

// Components
import AuthRoute from "./util/AuthRoute";

// Pages
import home from './pages/Home';
import register from './pages/Register';
import login from './pages/Login';
import user from './pages/user';
import writeMicroblog from "./Writing_Microblogs.js";
import edit from "./pages/edit.js";
import userLine from "./Userline.js";
import axios from "axios";

const theme = createMuiTheme(themeObject);

const token = localStorage.FBIdToken;
if (token) {
  const decodedToken = jwtDecode(token);
  if (decodedToken.exp * 1000 < Date.now()) {
    store.dispatch(logoutUser);
    window.location.href = "/login";
  } else {
    store.dispatch({ type: SET_AUTHENTICATED });
    axios.defaults.headers.common['Authorization'] = token;
    store.dispatch(getUserData());
  }
}


class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <Provider store={store}>
          <Router>
            <div className='container' >
              <Navbar />
            </div>

            <div className="app">
              <Switch>
              {/* AuthRoute checks if the user is logged in and if they are it redirects them to /home */}
              <AuthRoute exact path="/register" component={register} />
              <AuthRoute exact path="/login" component={login} />

              <Route exact path="/user" component={user} />
              <Route exact path="/home" component={writeMicroblog} />
              <Route exact path="/edit" component={edit} />
              <Route exact path="/user" component={userLine} />

              <Route exact path="/" component={home}/>
              </Switch>
            </div>

          </Router>
        </Provider>
      </MuiThemeProvider>
    );
  }
}

export default App;