import React, { useEffect } from "react";
import { NavLink } from "react-router-dom";
import { useSocket } from './context/socket';
import logo from './logo.svg';
import './App.css';

const Page2 = () => {

  const socket = useSocket();

  /* TODO: 

    1. Sort how to keep listening the websocket using a callback and put the output on console.log. You can use the useSocket or you can create another way to do so.
    2. send message (from input) to wsocket with SendMessage function
  */

  useEffect(() => {
    /*
      // _______________
      // SOME IDEAS: 
      // _______________
      // Using hooks?
      // Using another way?
      // It's up to you, keeping in mind that usually we will transfer short messages but we can also transfer bigger files.

    if(socket){
      console.log("socket event fired ???");
      socket.on("message", (event) => {
        console.log("message arrived: ", event.data );
      })
    }
    */
  },[]);

  const SendMessage = () => {
    console.log("sending message..");
  }

  return (
    <div className="App">
      <h3 >Page 2</h3>
      <header className="App-header">
        <NavLink to="/page1" style={{textDecoration:'inherit', color: "inherit"}}>goto Page 1</NavLink>
        <br/>
        <br/>
        <input></input>
        <button onClick={SendMessage}>SEND MESSAGE</button>
      </header>
    </div>
  );
}

export default Page2;