import React, {useEffect} from 'react';

import './App.css';

import './Sidebar'
import Sidebar from './Sidebar';
import Chat from './Chat'
import Login from './Login'

import { useDispatch, useSelector } from 'react-redux'
import { selectUser } from './features/userSlice'
import { auth } from './firebase'

import { login, logout } from './features/userSlice'

function App() {
  const dispatch = useDispatch()
  const user = useSelector(selectUser)

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {
      if (authUser) {
          dispatch(login({
            uid : authUser.uid,
            photo: authUser.photoURL,
            email: authUser.email,
            displayName : authUser.displayName,
          }))
      }
      else {
          dispatch(logout())
      }
    })
  }, [dispatch])

  return (
    <div className="app">
      { user ? (
        <>
          <Sidebar />
          <Chat />
        </>
      ) : (
        <Login />
      )}
      
    </div>
  );
}

export default App;