import { Routes, BrowserRouter, Route } from 'react-router-dom';

import PrivateRoutes from "./components/items/Pages/PrivateRoutes";

import AddLevel from './components/AddLevel';
import AddNation from './components/AddNation';
import AddTank from './components/AddTank';
import AddClient from './components/AddClient';
import PageForChecking from './components/PageForChecking';
import SingupPage from './components/items/Pages/SingupPage';
import LoginPage from './components/items/Pages/LoginPage';
import AccountPage from './components/items/Pages/AccountPage';
import MyNavBar from './components/items/Pages/MyNavbar';

/*function Router(props) {
  return useRoutes(props.rootRoute);
}*/

function App() {
  const routes = [
    { index: true, element: <LoginPage />, userGroup: "USER"},
    { path: 'levels', element: <AddLevel />, label: 'Обзор уровней', userGroup: "AUTH" },
    { path: 'nations', element: <AddNation />, label: 'Обзор наций', userGroup: "AUTH" },
    { path: 'tanks', element: <AddTank />, label: 'Обзор танков', userGroup: "AUTH"},
    { path: 'clients', element: <AddClient />, label: 'Обзор клиентов', userGroup: "ADMIN"},
    { path: 'checkPage', element: <PageForChecking />, label: 'Фильтр по танкам', userGroup: "AUTH"},
    { path: 'account', element: <AccountPage />, label: 'Аккаунт', userGroup: "AUTH"},
    { path: 'login', element: <LoginPage />, label: 'Вход', userGroup: "AUTH"}
  ];

  return (  
    <div className='App'>
      <BrowserRouter>
        <MyNavBar links={routes}></MyNavBar>
        <div className="content-div">
              <Routes>
                  <Route element={<LoginPage />} path="/login" />
                  <Route element={<SingupPage />} path="/singup" />
                  <Route element={<PrivateRoutes userGroup="AUTH" />}>
                    <Route element={<AccountPage />} path="/account" />
                    <Route element={<AddTank />} path="/tanks" />
                    <Route element={<AddLevel />} path="/levels" />
                    <Route element={<PageForChecking />} path="/checkPage" />
                    <Route element={<AddNation />} path="/nations" exact />
                    <Route element={<AddNation />} path="*" />
                  </Route>
                  <Route element={<PrivateRoutes userGroup="ADMIN" />}>
                    <Route element={<AddClient />} path="/clients" />
                  </Route>
              </Routes>
          </div>
          <footer className="border-top">
              Footer
          </footer>
      </BrowserRouter>
    </div>
  );
}

export default App;
