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

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

import { MainLayout } from './layouts/Main'

import { appPrivateRoutes, appPublicRoutes } from './routes'
import {
  privateRoutes,
  publicRoutes,
  recursiveRouteRenderer
} from './routes/util'

import './App.scss'

const App = () => {
  const { checkSession } = useAuth()
  const authState = useAppSelector((state) => state.auth)

  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])

  const handleRootRedirect = () => {
    if (authState.loggedIn) return appPrivateRoutes.homePage

    const callbackPathEncoded = btoa(
      window.location.href.split(`${window.location.origin}/#`)[1]
    )

    return `${appPublicRoutes.landingPage}?callbackPath=${callbackPathEncoded}`
  }

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

  const privateRouteList = recursiveRouteRenderer(privateRoutes)

  return (
    <Routes>
      <Route element={<MainLayout />}>
        {authState?.loggedIn && privateRouteList}
        {publicRoutesList}
        <Route path="*" element={<Navigate to={handleRootRedirect()} />} />
      </Route>
    </Routes>
  )
}

export default App