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 [listen, setListen] = useInput({ type: "text" });
  const [scoket, setScoket] = useState("");
  const [responseListen, setResponseListen] = useState("");
  const [responseEmit, setResponseEmit] = useState("");



  const handleConnection = () => {
    // setEndpoint();
    try {
      setScoket(io(ENDPOINT))
      setConnected(true)
    } catch {
      setConnected(false)
    }
   
    
    console.log(socket)
  };
  const emitMessage = async () => {
    const msg = await scoket.emit(emit)
    setResponseEmit(msg)
  }
   const listenOnMessage =  () => {
     scoket.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>
      {

      }
      <div>
        {setEmit} -> listen on {emit}
        <button onClick={emitMessage}>CLICK HERE TO EMIT</button>
      </div>
      <div>
      {setListen} -> listen on {listen}
        <button onClick={listenOnMessage}>CLICK HERE TO LISTEN ON</button>
        </div>
      <p>

      </p>
    </>
  );
}

export default App;