import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter as ReactRouter, Route, Routes, useHref, useNavigate} from 'react-router-dom'
import {RouterProvider as AriaRouterProvider} from 'react-aria-components'
import reportWebVitals from './reportWebVitals'
import { Generic } from './generic'
import routes from './routeList'
import './index.css'

const AppendTrailingSlash = (props) => {
  if (!window.location.pathname.endsWith('/')) {
    window.history.replaceState(window.history.state,document.title, window.location.pathname + '/' + window.location.search)
  }
  return <Generic {...props}/>
}

const App = () => {
  const navigate = useNavigate()

  return (
      <AriaRouterProvider navigate={navigate} useHref={useHref}>
        <Routes>
          { routes.map((route, i) => <Route key={i} path={route} element={<AppendTrailingSlash/>} trailing/> )}
        </Routes>
      </AriaRouterProvider>
  )
}

ReactDOM.render(
  // <React.StrictMode>
  <ReactRouter>
    <App />
  </ReactRouter>,
  // </React.StrictMode>,
  document.getElementById('root')
)

if (module.hot) {
    module.hot.accept()
}

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
