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

import { RadiosProvider } from './contexts/RadiosContext'
import Overview from './pages/Overview'
import APRS from './pages/APRS'
import APRSPacketsView from './pages/aprs/APRSPacketsView'
import MeshCore from './pages/MeshCore'
import MeshCoreGroupChatView from './pages/meshcore/MeshCoreGroupChatView'
import MeshCoreMapView from './pages/meshcore/MeshCoreMapView'
import MeshCorePacketsView from './pages/meshcore/MeshCorePacketsView'
import StyleGuide from './pages/StyleGuide'
import NotFound from './pages/NotFound'
import { KeyboardNavigationProvider } from './contexts/KeyboardNavigationContext'
import './App.scss'

const navLinks = [
  { label: 'Radios', to: '/' },
  { label: 'APRS', to: '/aprs' },
  { label: 'ADSB', to: '/adsb' },
  { label: 'MeshCore', to: '/meshcore' },
];

const withRadiosProvider = (Component: React.ComponentType<{ navLinks: typeof navLinks }>) =>
  () => (
    <RadiosProvider>
      <Component navLinks={navLinks} />
    </RadiosProvider>
  );

function App() {
  return (
    <KeyboardNavigationProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={withRadiosProvider(Overview)()} />
          <Route path="/aprs" element={withRadiosProvider(APRS)()}>
            <Route index element={<Navigate to="packets" replace />} />
            <Route path="packets" element={<APRSPacketsView />} />
          </Route>
          <Route path="/meshcore" element={withRadiosProvider(MeshCore)()}>
            <Route index element={<Navigate to="packets" replace />} />
            <Route path="packets" element={<MeshCorePacketsView />} />
            <Route path="groupchat" element={<MeshCoreGroupChatView />} />
            <Route path="map" element={<MeshCoreMapView />} />
          </Route>
          <Route path="/style-guide" element={<StyleGuide />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </BrowserRouter>
    </KeyboardNavigationProvider>
  )
}

export default App
