import type { PlayerState } from "@deadhead/schema";
import type { MapSelection } from "../src/map/hitTest";
import { buildScene } from "../src/map/scene";

/**
 * Test stand-in for the PixiJS map canvas: one button per tappable thing in
 * the real scene, calling `onSelect` with the same selection a tap would.
 */
export function MapCanvas({
  state,
  onSelect,
  focused = true,
}: {
  state: PlayerState;
  onSelect?: (selection: MapSelection | null) => void;
  focused?: boolean;
}) {
  // Behind a panel, the screen's own controls are what tests look for.
  if (!focused) return <div data-testid="map-canvas" />;
  const scene = buildScene(state, Date.now());
  return (
    <div data-testid="map-canvas">
      {scene.locations.map((l) => (
        <button key={l.id} type="button" onClick={() => onSelect?.({ kind: "location", id: l.id })}>
          Tap {l.name}
          {l.discovered ? "" : " (locked)"}
        </button>
      ))}
      {scene.flights.map((f) => (
        <button
          key={f.dispatchId}
          type="button"
          onClick={() => onSelect?.({ kind: "flight", dispatchId: f.dispatchId })}
        >
          Tap ship {f.shipId}
        </button>
      ))}
      <button type="button" onClick={() => onSelect?.(null)}>
        Tap empty space
      </button>
    </div>
  );
}