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

import { useAppSelector, useAuth } from './hooks'

import { MainLayout } from './layouts/Main'
import {
  privateRoutes,
  publicRoutes,
  recursiveRouteRenderer
} from './routes/util'

import './App.scss'

const App = () => {
  const { checkSession } = useAuth()
  const isLoggedIn = useAppSelector((state) => state.auth?.loggedIn)

  useEffect(() => {
    if (window.location.hostname === '0.0.0.0') {
      // A change of the host is needed to make  library available in windows object
      // the app can't encrypt files without the crypto library
      // which is only available on https or localhost
      window.location.hostname = 'localhost'
    }

    checkSession()
  }, [checkSession])

  // Hide route only if loggedIn and r.hiddenWhenLoggedIn are both true
  const publicRoutesList = recursiveRouteRenderer(publicRoutes, (r) => {
    return !isLoggedIn || !r.hiddenWhenLoggedIn
  })

  const privateRouteList = recursiveRouteRenderer(privateRoutes)

  return (
    <Routes>
      <Route element={<MainLayout />}>
        {publicRoutesList}
        {privateRouteList}
        <Route path="*" element={<Navigate to={'/'} />} />
      </Route>
    </Routes>
  )
}

export default App