import React, { useState, useEffect } from "react";
import { io } from "socket.io-client";

function useInput({ type }) {
  const [value, setValue] = useState("");
  const input = (
    <input
      
      value={value}
      onChange={(e) => setValue(e.target.value)}
      type={type}
    />
  );
  return [value, input];
}

function App() {
  const [ENDPOINT, setEndpoint] = useInput({ type: "text" });
  const [connected, setConnected] = useState(false);
  const [emit, setEmit] = useInput({ type: "text" });
  const [emitMsg, setEmitMsg] = useInput({ type: "text" });
  const [listenMsg, setListenMsg] = useState(null);
  const [listen, setListen] = useInput({ type: "text" });
  const [socket, setScoket] = useState("");
  const [responseListen, setResponseListen] = useState("");
  const [responseEmit, setResponseEmit] = useState("");



  const handleConnection = () => {
    // setEndpoint();
   
    setScoket(io(ENDPOINT))
    if (socket) {
       setConnected(true)
    } else {
      setConnected(false)
    }
     
   
   
    
    
  };
  const emitMessage = async () => {
    const msg = await socket.emit(emit,emitMsg)
    setResponseEmit(msg)
  }
   const listenOnMessage =  () => {
     socket.on(listen).then(res => {

       setResponseListen(res)
     }).catch(err => {
      
       setResponseListen(err)
      })
  }

  return (
    <>
      <p>ENTER THE ENDPOINT</p>
      {setEndpoint} -> {ENDPOINT}
      <br />
      <button onClick={handleConnection}>CLICK HERE TO TEST</button>
      {
        connected  
          ? <>
            <p>CONNECTED</p>
            <br/>
            
            <div>
              {setEmit} -> emit  {emit}
              {
                emit ?    setEmitMsg : ""
             }
        <button onClick={emitMessage}>CLICK HERE TO EMIT</button>
      </div>
      <div>
      {setListen} -> listen on {listen}
              <button onClick={listenOnMessage}>CLICK HERE TO LISTEN ON</button>
              <p>{ listenMsg}</p>
            </div>
            </>
      : ""
      }
     
<p>
      </p>
    </>
  );
}

export default App;