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;