import './App.css'
import Meeting from './components/meeting/Meeting'
import Sidebar from './components/sidebar/Sidebar'
import useBackendData from './hooks/useBackendData'
import useConferenceData from './hooks/useConferenceData'
import useLocalUser from './hooks/useLocalUser'

function App() {
  const { userInfo, setUserInfo } = useLocalUser()
  const { roomData, sendMessage } = useBackendData(userInfo)
  const { conferenceData, setConferenceData } = useConferenceData(sendMessage, setUserInfo)

  console.log('[App] [Room Data]', roomData)

  if (roomData && userInfo) {
    return (
      <div className="App">
        <Sidebar usersData={roomData} sendMessage={sendMessage} />
        <Meeting
          conferenceData={conferenceData}
          setConferenceData={setConferenceData}
          userInfo={userInfo}
          usersData={roomData}
        />
      </div>
    )
  }
  return <h2>🌀 Loading...</h2>
}

export default App