import React, {useState} from 'react';
import { useRoutes, Outlet, BrowserRouter } from 'react-router-dom';
import AddLevel from './components/AddLevel';
import MainHead from './components/MainHead';
import AddNation from './components/AddNation';
import AddTank from './components/AddTank';
import AddClient from './components/AddClient';
import PageForChecking from './components/PageForChecking';

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

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

  const links = routes.filter(route => route.hasOwnProperty('label'));

  const rootRoute = [
    { path: '/', element: render(links), children: routes }
  ];

  function render(links) {
    return (
      <div className="App">
        <MainHead links={links}/>
        <Outlet/>
      </div>
    );
  }

  return (  
    <BrowserRouter>
      <Router rootRoute={ rootRoute } />
    </BrowserRouter>
  );
}

export default App;
