import { useRouter } from "next/router";
import Layout from "../../components/Layout.js";
import Join from "../../components/room/Join.jsx";
import Create from "../../components/room/Create.jsx";
import { isBrowser, isEmpty } from "../../utils/utils.js";
import { useQuery } from "react-query";
import { useCallback, useContext, useEffect, useState } from "react";
import { getRoom } from "../../requests/requests.room.js";
import RoomPage from "../../components/room/RoomPage.jsx";
import { getExos, getTags } from "../../requests/requests.exos.js";
import ReconnectingWebSocket from "reconnecting-websocket";
import WaitingRoom from "../../components/room/WaitingRoom.jsx";
import useWebsocketConsumer from "../../hooks/useWebsocketConsumer.jsx";
import useWebsocket from "../../hooks/useWebsocket.jsx";
import {
  useWebsocketContext,
  WebsocketContext,
  WebsocketProvider,
} from "../../context/websocket.context.js";

export default function Room() {
  const router = useRouter();
  const action = router.query;

  //const [ws, setWs] = useState(null);

  /*  const wsConnect = useCallback((id_code) => {
    if (isBrowser) {
      if (ws != null) {
        ws.close();
        setWs(null);
      }
      setWs(
        new ReconnectingWebSocket("ws://192.168.1.18:8000/ws/room/" + id_code)
      );
    }
  }, []);
 */
  const [user, setUser] = useState();
  /* useEffect(() => {
    if (ws != null) {
      console.log("TEST");
      ws.onmessage = (e) => {
        console.log("eeeee", e);
        let data = JSON.parse(e.data);
        let type = data.type;

        if (type == "roomJoined") {
          let id_code = data.id_code;
          setUser({ clientId: data.clientId, user: data.identity });
          sessionStorage.setItem("clientId", data.clientId);
          router.push({ pathname: `/room/${id_code}` }, undefined, {
            shallow: true,
          });
        } else if (type == "accept_room") {
          let code = data.code;
          ws.send(JSON.stringify({ data: { type: "logAcceptedWaiter", code: code } }));
        } else if (type == "waitingRoom") {
          let nick = data.nick
          let id_code = data.id_code
          setWaiting(true);
          sessionStorage.setItem('waiter', true)
          sessionStorage.setItem('waiter_nick', nick)
          router.push({pathname: '/room/waiting/' + id_code}, undefined, {shallow: true })
        } else if (type == "reloged") {
          let id_code = data.id_code;
          setUser({ clientId: data.clientId, user: data.identity });
          sessionStorage.setItem("clientId", data.clientId);
          router.push({ pathname: `/room/${id_code}` }, undefined, {
            shallow: true,
          });
        } else if (type == "reconnectError") {
          router.push({ pathname: "/room/join" });
        } else if (type == "reconnected") {
          setUser({ clientId: data.clientId, user: data.identity });
        }
      };
    }
  }, [ws]); */
  //useWebsocketConsumer(ws, setUser,user, setData, dataRoom);

  /* const { connect, ws, addMessageHandler, removeMessageHandler, reconnect } =
    useWebsocket(); */

  const {
    send,
    connect,
    addMessageHandler,
    removeMessageHandler,
    isConnected,
  } = useWebsocketContext();

  useEffect(() => {
    let handler = (e) => {
      let data = JSON.parse(e.data);
      let type = data.type;
      switch (type) {
        case "roomJoined": {
          let id_code = data.id_code;
          setUser({ clientId: data.clientId, user: data.identity });
          sessionStorage.setItem("clientId", data.clientId);
          router.push({ pathname: `/room/${id_code}` }, undefined, {
            shallow: true,
          });
          break;
        }
        case "accept_room": {
          let code = data.code;
          send({
            data: { type: "logAcceptedWaiter", code: code },
          });
          break;
        }
        case "waitingRoom": {
          let nick = data.nick;
          let id_code = data.id_code;
          sessionStorage.setItem("waiter", true);
          sessionStorage.setItem("waiter_nick", nick);
          router.push({ pathname: "/room/waiting/" + id_code }, undefined, {
            shallow: true,
          });
          break;
        }
        case "reloged": {
          let id_code = data.id_code;
          setUser({ clientId: data.clientId, user: data.identity });
          sessionStorage.setItem("clientId", data.clientId);
          router.push({ pathname: `/room/${id_code}` }, undefined, {
            shallow: true,
          });
          break;
        }
        case "reconnected": {
          setUser({ clientId: data.clientId, user: data.identity });
          break;
        }
        case "reconnectError": {
          router.push({ pathname: "/room/join/" + data.id_code });
          break;
        }
        default:
          console.log("default root", e);
      }
    };
    addMessageHandler(handler);
    return () => {
      removeMessageHandler(handler);
    };
  });
  return (

    <>
      {!isEmpty(action) && (
        <main>
          {action.mode[0] == "create" ? (
            <Create />
          ) : action.mode[0] == "join" ? (
            <Join
              wsConnect={(id_code) => {
                connect(`ws://192.168.1.18:8000/ws/room/${id_code}`);
              }}
              send={send}
            />
          ) : action.mode[0] == "waiting" ? (
            <WaitingRoom
              wsConnect={(id_code) => {
                connect(`ws://192.168.1.18:8000/ws/room/${id_code}`);
              }}
              send={send}
            />
          ) : (
            <RoomPage
              id_code={action.mode[0]}
              user={user}
            />
          )}
        </main>
      )}
    </>
  );
}

export async function getStaticProps() {
  return {
    props: {},
    revalidate: 60,
  };
}

export const getStaticPaths = async () => {
  return {
    paths: [
      /* { params: { mode: "join" } }, { params: { mode: "create" } } */
    ], //indicates that no page needs be created at build time
    fallback: "blocking", //indicates the type of fallback
  };
};