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";
import { useLocation } from "react-router-dom";
import { CountdownProvider } from "@/components/Provider/CountdownProvider";

function MainContent() {
  const { isConnected, handleDisconnect } = useContext(RealtimeClientContext);
  const location = useLocation();

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

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

  useEffect(() => {
    if (isConnected) {
      handleDisconnect();
    }
  }, [location.pathname]);

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

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