import React, { FC } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { HomePage } from 'components/HomePage/HomePage';
import { AuthUser } from 'components/AuthUser/AuthUser';
import { LandingPage } from 'components/LandingPage/LandingPage';
import { PrivateRoute } from 'components/api/PrivateRoute/PrivateRoute';
import { AuthRoutes, NonAuthRoutes } from 'components/api/routes';
import { NotFound } from 'components/NotFound/NotFound';
import { ProfilePage } from 'components/ProfilePage/ProfilePage';
import { Roles } from 'components/api/userRoles';
import { Unauthorized } from 'components/Unauthorized/Unauthorized';

export const App: FC = () => (
  <Router>
    <div data-testid="App">
      <Switch>
        <Route path={NonAuthRoutes.auth} component={AuthUser} />
        <Route exact path={NonAuthRoutes.home} component={LandingPage} />
        <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]}
        />
        <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>
);