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";
import RoomHome from "../../components/room/HomePage.jsx";
import { notificationService } from "../../services/notification.service.js";

export default function Room() {
  const router = useRouter();
  const action = router.query;
  const [user, setUser] = useState();

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

  

  useEffect(() => {
    let handler = (e) => {
      console.log('ROOT HANDLER')
      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;
          let nick = data.nick;
          send({
            data: { type: "logAcceptedWaiter", code: code , nick: nick},
          });
          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": {
          console.log('RECONNECTED')
          setUser({ clientId: data.clientId, user: data.identity });
          sessionStorage.setItem('clientId', data.clientId)
          break;
        }
        case "reconnectError": {
          router.push({ pathname: "/room/join/" + data.id_code });
          break;
        }
        case "loginResponse": {
          const error = data.error
          if (error == 'USER_INPUT') {
            notificationService.error('Connexion', data.description)
          }
          break;
        }
        case "room_deleted": {
          sessionStorage.clear()
          notificationService.info('Suppression', "La salle a été supprimée par l'administrateur", {keepAfterRouteChange: true})
          router.push({ pathname: "/room/" });
          
          break;
        }
        default:
          break
      }
    };
    addMessageHandler(handler);
    return () => {
      removeMessageHandler(handler);
    };
  });

  
  useEffect(() => {
    return () => {
      disconnect()
  }}, [])
  return (
    <>
      {isEmpty(action) && router.isReady && <RoomHome />}
      {!isEmpty(action) && (
        <>
          {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}
            />
          )}
        </>
      )}
    </>
  );
}

/* 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
  };
};
 */