import React, { FC, useEffect, useState } from 'react';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { AuthUser } from 'components/AuthUser/AuthUser';
import { LandingPage } from 'components/NonAuthUser/LandingPage/LandingPage';
import { PrivateRoute } from 'api/PrivateRoute/PrivateRoute';
import { AuthRoutes, NonAuthRoutes } from 'api/routes';
import { NotFound } from 'components/NonAuthUser/NotFound/NotFound';
import { ProfilePage } from 'components/AuthUser/ProfilePage/ProfilePage';
import { Roles } from 'api/userRoles';
import { Unauthorized } from 'components/NonAuthUser/Unauthorized/Unauthorized';
import { ReservationPage } from 'components/AuthUser/ReservationPage/ReservationPage';
import { HomePage } from 'components/AuthUser/HomePage/HomePage';
import { SignInForm } from 'components/AuthUser/SignInForm/SignInForm';
import { AuthContext } from 'components/AuthUser/AuthContext';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#5e5ce4',
    },
    secondary: {
      main: '#e2e45c',
    },
  },

  typography: {
    fontSize: 16,
  },

  overrides: {
    MuiTabs: {
      indicator: {
        backgroundColor: 'white',
      },
    },
    MuiTab: {
      wrapper: {
        flexDirection: 'row',
      },
    },
  },
});

export const App: FC = () => {
  const [role, setRole] = useState('');
  const value = { role, setRole };

  return (
    <ThemeProvider theme={theme}>
      <Router>
        <div data-testid="App">
          <Switch>
            <Route exact path={NonAuthRoutes.home} component={LandingPage} />
            <AuthContext.Provider value={value}>
              <Route path={NonAuthRoutes.auth} component={AuthUser} />
              <PrivateRoute
                path={AuthRoutes.dashboard}
                Component={HomePage}
                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
              />
              <PrivateRoute
                path={AuthRoutes.profile}
                Component={ProfilePage}
                requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
              />
            </AuthContext.Provider>
            <Route path={AuthRoutes.reservation} component={ReservationPage} />
            <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
            <Route component={NotFound} />
          </Switch>
        </div>
      </Router>
    </ThemeProvider>
  );
};