import { Provider } from 'jotai'
import { useState } from 'react'
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'
import { useRoomName } from './hooks/useRoomName'

function App() {
  const { userInfo, setUserInfo } = useLocalUser()
  const { roomData, sendMessage } = useBackendData(userInfo)
  const { conferenceData, setConferenceData } = useConferenceData(sendMessage, setUserInfo)
  const [meetingStarted, setMeetingStarted] = useState(false)

  console.log(roomData)

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

export default App