import { DebugTab } from "./components/DebugTab";

const tabLabels = ["Quest Progress", "Node Details", ];

const tabLabels = ["Quest Progress", "Node Details", "Debug" ];

  }, [gameState.playerSave.allocatedPointNodeSet,  gameState.playerSave.availableSp]);

  }, [gameState.playerSave.allocatedPointNodeSet, gameState.playerSave.availableSp]);
  tabViews[2] = useMemo(() => {
    return (
      <DebugTab
        selectedPointNode={gameState.playerUI.selectedPointNode}
        allocatedPointNodeSet={gameState.playerSave.allocatedPointNodeSet}
        worldGen={gameState.worldGen}
        availableSp={gameState.playerSave.availableSp}
      />);
  }, [
    gameState.playerUI.selectedPointNode,
    gameState.playerSave.allocatedPointNodeSet,
    gameState.worldGen,
    gameState.playerSave.availableSp
  ]);

import React, { useEffect, useState } from "react";
import { PointNodeRef, ResourceType, WorldGenState } from "../data/GameState";
import { HashSet } from "../lib/util/data_structures/hash";
import { canAllocate } from "../data/lib/Neighbors";
type Props = {
  selectedPointNode?: PointNodeRef
  allocatedPointNodeSet: HashSet<PointNodeRef>,
  worldGen: WorldGenState,
  availableSp: number,
}
export function DebugTab({
  selectedPointNode,
  allocatedPointNodeSet,
  worldGen,
  availableSp,
}: Props) {
  const [history, setHistory] = useState<PointNodeRef[]>([]);
  useEffect(() => {
    if (!selectedPointNode) return;
    setHistory((history) => [...history, selectedPointNode]);
  }, [selectedPointNode]);
  if (!selectedPointNode) {
    return (<> </>)
  }
  const pointNodeGen = worldGen.zLevels[selectedPointNode.z]!.chunks.get(selectedPointNode.chunkCoord)!.pointNodes.get(selectedPointNode.pointNodeCoord)!
  const isAllocated = (allocatedPointNodeSet.contains(selectedPointNode));
  const canBeAllocated: string = canAllocate(selectedPointNode, worldGen, allocatedPointNodeSet, availableSp);
  let nodeDescription: string = "Nothing (empty node)";
  if (pointNodeGen.resourceType !== ResourceType.Nothing) {
    nodeDescription = `${pointNodeGen.resourceAmount} ${pointNodeGen.resourceModifier} ${pointNodeGen.resourceType}`
  }
  return (
    <>
      <h1>Current</h1>
      <div>
        Z={selectedPointNode.z}
      </div>
      <div>
        Chunk={selectedPointNode.chunkCoord.x},{selectedPointNode.chunkCoord.y}
      </div>
      <div>
        Node={selectedPointNode.pointNodeCoord.x},{selectedPointNode.pointNodeCoord.y}
      </div>
      <br></br>
      <div>Allocated? {isAllocated ? "yes" : "no"} </div>
      <br></br>
      <div>Can be allocated? {canBeAllocated} </div>
      <br></br>
      <div> Stats: </div>
      <div> {nodeDescription} </div>
      <h3>Previous</h3>
      {history
        .slice(0, -1)
        .map((pointNodeRef: PointNodeRef, i) => {
          return (
            <div key={i}>
              <div>
                Z={pointNodeRef.z} { }
                Chunk={pointNodeRef.chunkCoord.x},{pointNodeRef.chunkCoord.y} { }
                Node={pointNodeRef.pointNodeCoord.x},{pointNodeRef.pointNodeCoord.y}
              </div>
            </div>
          );
        })
        .reverse()}
    </>
  );
}

    return (<> </>)

    return (<>
      <h1>Stats</h1>
      <div>Select a node first!</div>
    </>)

      <h1>Current</h1>
      <div>
        Z: {selectedPointNode.z} . Chunk: {selectedPointNode.chunkCoord.x}, {selectedPointNode.chunkCoord.y} . Node: {selectedPointNode.pointNodeCoord.x}, {selectedPointNode.pointNodeCoord.y} .
      </div>
      <br></br>
      <div>Allocated? {isAllocated ? "yes" : "no"} </div>
      <div>Can be allocated? {canBeAllocated} </div>
      <br></br>
      <div> Stats: </div>

      <h1>Stats</h1>

      <h2>Previous</h2>
      {history
        .slice(0, -1)
        .map((pointNodeRef: PointNodeRef, i) => {
          return (
            <div key={i}>
              Chunk ({pointNodeRef.chunkCoord.x},{pointNodeRef.chunkCoord.y}) at ({pointNodeRef.pointNodeCoord.x},
              {pointNodeRef.pointNodeCoord.y})
            </div>
          );
        })
        .reverse()}

      <h3>Allocated?</h3>
      {isAllocated ? "yes" : "no"}
      <h3>Can be allocated?</h3>
      {canBeAllocated}

      <h2> Available SP: </h2>
      <div>{remainingPoints}</div>
      {(remainingPoints === 0) ? (<div><br></br>(Start a quest first!)</div>) : (<></>) }

        <br></br>
        <br></br>
        <br></br>

          <div>Goal: {activeQuest}</div>
          <br></br>
          <div>Current: {'[PLACEHOLDER]'}</div>

          <h3>Goal:</h3>
          <div>{activeQuest}</div>

          <div>(Hint: You won't run out of skill points, but they come in batches - try to use the fewest you can!)</div>

          <h3>Current:</h3>
          <div>{'[PLACEHOLDER]'}</div>

          <h3>Reward:</h3>
          <div>{'???'}</div>

      </>)}

          <br></br>
          <div>(Hint: You won't run out of skill points, but they come in batches - try to use the fewest you can!)</div>
        </>)}
      <br></br>
      <h3> Available SP: </h3>
      <div>{remainingPoints}</div>
      {(remainingPoints === 0) ? (<div><br></br>(Start a quest first!)</div>) : (<></>) }

  // activeQuest: any | undefined,
  // batchesSinceQuestStart: number,

        chunks.put(location, this.chunkGenFactory.create({ seed: id, location }));

        chunks.put(location, this.chunkGenFactory.create({ seed: id, location, z: args.z }));

  public create(args: { seed: number, location: Vector2 }): ChunkGen {

  public create(args: { seed: number, location: Vector2, z: number }): ChunkGen {

          pointNodes.put(loc, this.pointNodeGenFactory.create({ seed: id, location: loc }));

          pointNodes.put(loc, this.pointNodeGenFactory.create({ seed: id, location: loc, chunk: args.location, z: args.z }));

  public create(args: { seed: number, location: Vector2 }): PointNodeGen {

  public create(args: { seed: number, location: Vector2, chunk: Vector2, z: number }): PointNodeGen {

      resourceType = ResourceType.Nothing;
    }
    // override for root node
    if (args.location.equals(Vector2.Zero) && args.chunk.equals(Vector2.Zero) && args.z === 0) {

import { canAllocate } from "../../data/lib/Neighbors";

import { canAllocate } from "../../game/Neighbors";

    const { args, updaters } = this.staleProps;
    this.backdrop.addListener('pointerdown', (event) => {
      updaters.playerUI.selectedPointNode.enqueueUpdate((prev, whole) => {
        return undefined;
      })
    });