import { Show } from "solid-js";
import type { DebugSnapshot } from "../engine/Game.js";

export interface DebugPanelProps {
  debug: DebugSnapshot | null;
}

export function DebugPanel(props: DebugPanelProps) {
  return (
    <Show when={props.debug}>
      {(debug) => (
        <dl class="debug">
          <dt>fps</dt>
          <dd>{debug().fps}</dd>

          <dt>camera zone</dt>
          <dd>{debug().activeZone ?? "—"}</dd>

          <dt>grounded</dt>
          <dd>{debug().grounded ? "yes" : "no"}</dd>

          <dt>position</dt>
          <dd>
            {debug().position.x} {debug().position.y} {debug().position.z}
          </dd>

          <dt>awake bodies</dt>
          <dd>{debug().awakeBodies}</dd>

          <dt>physics</dt>
          <dd>{debug().threadedPhysics ? "box3d threaded" : "box3d single-thread"}</dd>

          <dt>session</dt>
          <dd>{debug().net ? `${debug().net!.role} · ${debug().net!.peers} peers` : "solo"}</dd>

          <Show when={debug().net?.role === "guest"}>
            <dt>drift</dt>
            <dd>{debug().net!.drift}m</dd>
          </Show>
        </dl>
      )}
    </Show>
  );
}
