import { useState, useEffect } from 'react'
import { BrowserRouter } from 'react-router-dom'
import Layout from './components/Layout/Layout'
import Routes from './components/Routes/Routes'
import { useAuth } from './hooks/useAuth'
import { UserContext } from './hooks/userContext'
import { User } from './models/user.model'

function App() {
  const { loginUser, error, isUserLogged, getUser, logoutUser } = useAuth()
  const [isLogged, setisLogged] = useState<boolean>(false)
  const [user, setuser] = useState<User>()

  useEffect(() => {
    let subscribed = true
    async function checkIsLogged() {
      const userLogged = await isUserLogged()
      if (userLogged) {
        setisLogged(true)
        setuser(getUser() as User)
      } else setisLogged(false)
    }
    if (subscribed) checkIsLogged()
    return () => {
      subscribed = false
    }
  }, [isLogged])

  return (
    <BrowserRouter>
      <UserContext.Provider
        value={{ user, loginUser, error, isLogged, logoutUser, setisLogged }}
      >
        <Layout>
          <Routes />
        </Layout>
      </UserContext.Provider>
    </BrowserRouter>
  )
}
export default App