import React, { useCallback, useMemo, useState } from "react";

import React, { useCallback, useEffect, useMemo, useState } from "react";

import QuestProgress from "./components/QuestProgress";
import Sidebar from "./components/Sidebar";
import TabContent from "./components/TabContent";
import Tabs from "./components/Tabs";

import { Vector2 } from "./lib/util/geometry/vector2";

import { Vector2 } from "./lib/util/geometry/vector2";

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

  const [focusedNode, setFocusedNode] = useState < { chunk: Chunk, node: Vector2 }>();

  const [focusedNode, setFocusedNode] = useState<{
    chunk: Chunk;
    node: Vector2;
  }>();
  const [batchContents, setBatchContents] = useState(0);
  const [activeTab, setActiveTab] = useState(0);

  const game = useMemo(() => ({}),[])

  const game = useMemo(() => ({}), []);

      setBatchContents((n) => n - 1);

  );
  const handleActiveTabChange = useCallback(
    (activeTabIndex) => {
      setActiveTab(activeTabIndex);
    },
    [setActiveTab]

  useEffect(() => {
    if (batchContents === 0) {
      setBatchContents(5);
    }
  }, [batchContents]);
  const tabViews = useMemo(() => {
    return [
      <NodeDetail focusedNode={focusedNode} />,
      <QuestProgress remainingPoints={batchContents} />,
    ];
  }, [focusedNode]);

            <PixiComponent onFocusedNodeChange={handleFocusedNodeChange} />
            <NodeDetail focusedNode={focusedNode} />

          <PixiComponent onFocusedNodeChange={handleFocusedNodeChange} />
          <Sidebar>
            <Tabs
              value={activeTab}
              labels={tabLabels}
              onChange={handleActiveTabChange}
            />
            {tabViews.map((component, i) => {
              return (
                <TabContent key={i} showContent={activeTab === i}>
                  {component}
                </TabContent>
              );
            })}
          </Sidebar>

import "./NodeDetail.css";

      <div className="layout">
        {focusedNode && focusedNode.chunk && (
          <>
            <h1>Current</h1>
            <h3>
              Chunk: {focusedNode.chunk.location.x},
              {focusedNode.chunk.location.y}
            </h3>
            <h3>X: {focusedNode.node.x}</h3>
            <h3>Y: {focusedNode.node.y}</h3>
            <h2>Previous</h2>
            {history
              .slice(0, -1)
              .map(({ chunk, node }, i) => {
                return (
                  <div key={i}>
                    Chunk ({chunk.location.x},{chunk.location.y}) at ({node.x},
                    {node.y})
                  </div>
                );
              })
              .reverse()}
          </>
        )}
      </div>

      {focusedNode && focusedNode.chunk && (
        <>
          <h1>Current</h1>
          <h3>
            Chunk: {focusedNode.chunk.location.x},{focusedNode.chunk.location.y}
          </h3>
          <h3>X: {focusedNode.node.x}</h3>
          <h3>Y: {focusedNode.node.y}</h3>
          <h2>Previous</h2>
          {history
            .slice(0, -1)
            .map(({ chunk, node }, i) => {
              return (
                <div key={i}>
                  Chunk ({chunk.location.x},{chunk.location.y}) at ({node.x},
                  {node.y})
                </div>
              );
            })
            .reverse()}
        </>
      )}

import React from "react";
export default function QuestProgress({ remainingPoints }) {
  return (
    <>
      <h1>Quest Progress</h1>
      <h3>
        You have {remainingPoints} skill points left in your current batch
      </h3>
    </>
  );
}

.layout {
  position:fixed;
  right:0;
  left:auto;
  height:100%;
  width:30%;
  top:0;
  flex:1 0 auto;
  overflow-y:auto;
  flex-direction: column;
  background-color: rgba(255,255,255,.70)
}

import React from "react";
import "./Sidebar.css";
export default function Sidebar({ children }) {
  return <div className="layout">{children}</div>;
}

import React from "react";
export default function TabContent({ showContent, children }) {
  return <div hidden={!showContent}>{children}</div>;
}

.tab-label-container {
  flex: content;
  flex-direction: row;
}
.tab-label {
  flex: 0 1 auto;
}
.tab-label:hover {
  font-weight: 700;
  color:inherit;
}
.inactive {
 color:rgba(0,0,0,.4)
}

import React from "react";
import "./Tabs.css";
export default function Tabs({ value, labels, onChange }) {
  return (
    <div className={"tab-label-container"}>
      {labels.map((label, i) => (
        <Tab onClick={onChange} value={i} active={value === i} key={i}>
          {label}
        </Tab>
      ))}
    </div>
  );
}
function Tab({ onClick, value, active, children }) {
  const handleClick = () => {
    onClick(value);
  };
  return (
    <div className={active ? "tab-label active" : "tab-label inactive"}>
      <div onClick={handleClick}>{children}</div>
    </div>
  );
}