import Room from "./Room";
import Antechamber from "./Antechamber";
import { useContext, useEffect } from "react";
import {
  RealtimeClientContext,
  RealtimeClientProvider,
} from "@/components/Provider/RealtimeClientProvider";
import { ReportProvider } from "@/components/Provider/ReportResolveProvider";
import { RealtimeUtils } from "@coze/realtime-api";



function MainContent() {
  const { isConnected } = useContext(RealtimeClientContext);

  const handlePromise = async() => {
    await RealtimeUtils.checkDevicePermission(false);
  }

  useEffect(() => {
    handlePromise();
  }, []);

  return (
    <ReportProvider>
      {isConnected ? <Room /> : <Antechamber />}
    </ReportProvider>
    
  );
}

export default function MainArea() {
  return (
    <RealtimeClientProvider>
      <MainContent />
    </RealtimeClientProvider>
  );
}