import { createEffect, createSignal, JSXElement, useContext } from "solid-js";
import { Button } from "@/components/ui/button";
import { useWebsocket, WebsocketContext, WebsocketProvider } from "./Websocket";

export function Debug(): JSXElement {
  const connected = useWebsocket;
  // const [connected, set_connected] = createSignal(false);
  const [user_count, _set_user_count] = createSignal("0");
  const [game_count, _set_game_count] = createSignal("0");

  // const toggle = () => set_connected(!connected());
  createEffect(() => console.log(connected()));

  return (
    <div class="my-2 w-auto">
      <h2 class="p-1 text-2xl">Debug:</h2>
      <p class="p-1">
        Connection Status: {connected() ? "Connected" : "Disconnected"}
      </p>
      <p class="p-1">Users Online: {user_count()}</p>
      <p class="p-1">Active Games: {game_count()}</p>
      <div class="p-1">
        <Button
          onClick={() => set_connected(!connected())}
          disabled={connected()}
        >
          "Connect"
        </Button>
        <Button
          onClick={() => set_connected(!connected())}
          disabled={!connected()}
        >
          "Disconnect"
        </Button>
      </div>
    </div>
  );
}