import React, { useEffect, useState } from "react";;
import { useWebSocket } from "./components/WebSocketContext.jsx";
import { DraftMessage, DraftPhase, DraftPhaseLabel, DraftPhasesOrdered } from './constants.js';
import { fetchDraftDetails, isEmptyObject, handleDraftStatusMessages, handleUserIdentifyMessages } from "./utils.js"

export const DraftDebug = ({ draftSessionId }) => {
  const [draftState, setDraftState] = useState({})
  const socket = useWebSocket();
  if (!socket) return;

  useEffect(() => {
    if (!socket) return;
    const openHandler = (event) => {
      console.log('Websocket Opened')
    }
    const closeHandler = (event) => {
      console.log('Websocket Closed')
    }
    socket.addEventListener('open', openHandler);
    socket.addEventListener('close', closeHandler);
    return () => {
      socket.removeEventListener('open', openHandler);
      socket.removeEventListener('close', closeHandler);
    }
  }, [socket])

  useEffect(() => {
    if (!socket) return;

    const draftStatusMessageHandler = (event) => handleDraftStatusMessages(event, setDraftState)

    socket.addEventListener('message', draftStatusMessageHandler);


    return () => {
      socket.removeEventListener('message', draftStatusMessageHandler)
    };
  }, [socket]);
  const data = { 'message': 'test' }
  return (<pre style={{margin: "1em"}}>
    {JSON.stringify(draftState, null, 2)}
  </pre>
  )

}