import * as React from 'react';
import  { FunctionComponent, useState } from 'react';
import {context} from './context'
import { RTMTWS } from './rtmt/rtmt_websocket';

const Home:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
  const [clicks, setClicks] = useState(initial);

  React.useEffect(()=>{

    

    const rtmtws = context.rtmt as RTMTWS
    if(rtmtws){
      rtmtws.initWebSocket(onConnectionDone)
    }else{
      console.log("context.rtmt is not RTMTWS");
    }
  })

  const onConnectionDone = ()=>{
    context.rtmt.sendMessage("new_game", "")
    context.rtmt.listenMessage("new_game", (message)=>{
      console.log("new message");
    })
  }

  return <>
    <p>Clicks: {clicks}</p>
    <button onClick={() => setClicks(clicks+1)}>+</button>
    <button onClick={() => setClicks(clicks-1)}>-</button>
  </>
}

export default Home