import { useRouter } from "next/router";
import { useContext, useEffect, useState } from "react";
import { useQuery } from "react-query";
import { delRoom, getRoom } from "../../requests/requests.room.js";
import CreateParcours from "./CreateParcours.jsx";
import Parcours from "./Parcours.jsx";
import ParcoursView from "./ParcoursView.jsx";
import RoomView from "./RoomView.jsx";

import { isBrowser, isEmpty } from "../../utils/utils.js";
import useReconnecting from "../../hooks/useReconnecting.jsx";
import useWebsocketConsumer from "../../hooks/useWebsocketConsumer.jsx";
import ParcoursEdit from "./ParcoursEdit.jsx";
import { useWebsocketContext } from "../../context/websocket.context.js";
import Correction from "./Correction.jsx";
import RoomEdit from "./roomEdit.jsx";
import Layout from "../Layout.js";

export default function RoomPage({ id_code, user }) {
  const [joined, setJoined] = useState(false);
  const router = useRouter();
  const {
    ws,
    send,
    connect,
    addMessageHandler,
    removeMessageHandler,
    isConnected,
  } = useWebsocketContext();

  useEffect(() => {
    if (isConnected == false && isBrowser) {
      console.log('CONNECTED')
      connect("/ws/room/" + id_code);
      send({
        data: {
          type: "reconnect",
          clientId: sessionStorage.getItem("clientId"),
        },
      });
    }
  }, [isConnected]);

  

  return (
    <>
      {ws == null && user == undefined && (
        <Layout page={'Chargement'}>
          <div className="loader"></div>
        </Layout>
      )}
      {isConnected == true&& user != undefined && (
        <>
          {router.query.mode.length == 1 && (
            <RoomView
              user={user}
              id_code={id_code}
            />
          )}
          {router.query.mode[1] == "new_parcours" && (
            <CreateParcours roomCode={id_code} ws={ws} user={user.user} />
          )}

          {router.query.mode.length == 3 &&
            router.query.mode[2] == "challenge" && (
              <Parcours
                parcours_id={router.query.mode[1]}
                roomCode={id_code}
                user={user.user}
              />
            )}
          {router.query.mode.length == 3 &&
            router.query.mode[2] == "correct" &&
            router.query.c && (
              <Correction
                owner={user.user.owner}
                room_code={router.query.mode[0]}
                user_code={router.query.c.split("_")[0]}
                correct_code={router.query.c.split("_")[1]}
                parcours_id={router.query.mode[1]}
              />
            )}
          {router.query.mode[2] == "edit" && router.query.mode.length == 3 && (
            <ParcoursEdit
              parcours_id={router.query.mode[1]}
              room_code={id_code}
              user={user.user}
            />
          )}
          {router.query.mode[1] == "edit" && router.query.mode.length == 2 && (
            <RoomEdit
              id_code={id_code}
              user={user.user}
            />
          )}
          {router.query.mode.length == 2 &&
            router.query.mode[1] != "new_parcours" &&
            router.query.mode[1] != "edit" && (
              <ParcoursView
                parcours_id={router.query.mode[1]}
                room_code={id_code}
                user={user.user}
                addMessageHandler={addMessageHandler}
                removeMessageHandler={removeMessageHandler}
              />
            )}
        </>
      )}
    </>
  );
}