import { useCallback } from "react";
import logo from "./logo.svg";
import "./App.css";

function App({ keycloak }) {
  const callApi = useCallback(async () => {
    const response = await fetch("http://localhost:8081/api/userinfo", {
      headers: {
        Authorization: `Bearer ${keycloak.token}`,
      },
    });
    if (response.ok) {
      alert(`Response is: ${await response.text()}`);
    } else {
      console.error(response.statusText);
    }
  }, [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();
            callApi();
          }}
        >
          Call API
        </span>
        <br />
        <span
          className="App-link"
          onClick={(e) => {
            e.preventDefault();
            keycloak.logout({
              redirectUri: "http://localhost:3000",
            });
          }}
        >
          Logout
        </span>
      </header>
    </div>
  );
}

export default App;