import React from "react";
import { ManagementSubpage } from "./ManagementSubpage";
import { TerritorySubpage } from "./TerritorySubpage";
import { EquipmentsSubpage } from "./EquipmentsSubpage";
import { Player } from "@player";
import { Context } from "./Context";

import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";

import { useCycleRerender } from "../../ui/React/hooks";
import Button from "@mui/material/Button";
import { Router } from "../../ui/GameRoot";
import { Page } from "../../ui/Router";
import { Factions } from "../../Faction/Factions";

/** React Component for all the gang stuff. */
export function GangRoot(): React.ReactElement {
  const gang = (function () {
    if (Player.gang === null) throw new Error("Gang should not be null");
    return Player.gang;
  })();
  const [value, setValue] = React.useState(0);

  function handleChange(__event: React.SyntheticEvent, tab: number): void {
    setValue(tab);
  }

  useCycleRerender();

  return (
    <Context.Gang.Provider value={gang}>
      <div style={{ display: "flex" }}>
        <Tabs
          variant="fullWidth"
          value={value}
          onChange={handleChange}
          sx={{ minWidth: "fit-content", maxWidth: "45%" }}
        >
          <Tab label="Management" />
          <Tab label="Equipment" />
          <Tab label="Territory" />
        </Tabs>
        <Button
          style={{ marginLeft: "20px" }}
          onClick={() => {
            Router.toPage(Page.Faction, { faction: Factions[gang.facName] });
          }}
        >
          Faction
        </Button>
      </div>
      {value === 0 && <ManagementSubpage />}
      {value === 1 && <EquipmentsSubpage />}
      {value === 2 && <TerritorySubpage />}
    </Context.Gang.Provider>
  );
}
