import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import RootPage from './modules/Root';
import AboutPage from './modules/About';
import AccountPage from './modules/Account';
import LoginPage from './modules/Login';
import SignupPage from './modules/Signup';
import TodoPage from './modules/TodoList';
import { connect } from 'react-redux';
import ThemeProvider from './ThemeProvider';
import Navbar from './Navbar';

const App = (props) => {
  return (
    <ThemeProvider>
      <Navbar />
      <Router>
        <Switch>
          <Route path='/about'>
            <AboutPage />
          </Route>
          <Route path='/login'>
            <LoginPage />
          </Route>
          <Route path='/signup'>
            <SignupPage />
          </Route>
          <PRoute path='/todos'>
            <TodoPage />
          </PRoute>
          <PRoute path='/account'>
            <AccountPage />
          </PRoute>
          <PRoute path='/'>
            <RootPage />
          </PRoute>
        </Switch>
      </Router>
    </ThemeProvider>
  );
};

const PRoute = connect(
  (state) => {
    return {
      token: state.login.token
    };
  },
  (dispatch, props) => {
    return {};
  }
)(({ children, ...props }) => {
  return (
    <Route
      {...props}
      render={({ location }) => {
        return props.token !== undefined ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: location }
            }}
          />
        );
      }}
    />
  );
});

export default App;