import React, { useState, useContext, useEffect, useRef } from "react";
import { GlobalContext} from "./GlobalContext.js";
import "./PingPong.css";

const PingPong = () => {
  const [ count, setCount ] = useState(0);
  const global = useContext(GlobalContext);

  const onWsMessage = (event) => {
    const data = JSON.parse(event.data);
    switch (data.type) {
    case 'ping':
      global.ws.send(JSON.stringify({ type: 'pong', timestamp: data.ping }));
      setCount(count + 1);
      break;
    default:
      break;
    }
  };
  const refWsMessage = useRef(onWsMessage);

  useEffect(() => { refWsMessage.current = onWsMessage; });

  useEffect(() => {
    if (!global.ws) {
      return;
    }
    const cbMessage = e => refWsMessage.current(e);
    global.ws.addEventListener('message', cbMessage);
    return () => {
      global.ws.removeEventListener('message', cbMessage);
    }
  }, [global.ws, refWsMessage]);

  return <div className="PingPong">
    Game {global.gameId}: {global.name} {global.ws ? 'has socket' : 'no socket' } { count } pings
  </div>;
}

export { PingPong };