import { useCallback, useEffect } from "react";
import Stomp from "webstomp-client";
import SockJS from "sockjs-client";
import logo from "./logo.svg";
import "./App.css";

let stomp

const connect = async (token) => {
  if (stomp != null) return;
  console.info("Connect to Websocket");
  const sock = new SockJS("/api/ws");
  stomp = Stomp.over(sock);

  stomp.connect(
    {"X-Authorization": token},
    (frame) => {
      console.log("Connected", frame);

      const requestUrl = "/app/simple";
      let params = {
        tratata: 1,
        gratata: 0
      }
      stomp.send(
        requestUrl,
        JSON.stringify(params)
      );
      stomp.subscribe("/user/simple", (results, errors)=>{
        console.log("results: ", results);
        console.log("errors: ", errors);
      });

    },
    error => {
      console.error("Disconnected: ", error);
    }
  );
}

function App({ keycloak }) {
  const fetchFromApi = useCallback(async (url) => {
    const response = await fetch(url, {
      headers: {
        Authorization: `Bearer ${keycloak.token}`,
      },
    });
    if (response.ok) {
      alert(await response.text());
    } else {
      console.error(response.statusText);
    }
  }, [keycloak.token]);

  useEffect(() => {
    connect(keycloak.token);
  }, [keycloak.token]);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <span
          className="App-link"
          onClick={(e) => {
            e.preventDefault();
            fetchFromApi("/api/userinfo");
          }}
        >
          Get user email
        </span>
        <br />
        <span
          className="App-link"
          onClick={(e) => {
            e.preventDefault();
            fetchFromApi("/api/users");
          }}
        >
          Get all users
        </span>
        <br />
        <span
          className="App-link"
          onClick={(e) => {
            e.preventDefault();
            keycloak.logout({
              redirectUri: "http://localhost:3000",
            });
          }}
        >
          Logout
        </span>
      </header>
    </div>
  );
}

export default App;