import { AugmentationNames } from "./Augmentation/data/AugmentationNames";
import { CodingContractTypes } from "./CodingContracts";
import {
  generateContract,
  generateRandomContract,
  generateRandomContractOnHome,
} from "./CodingContractGenerator";
import { Companies } from "./Company/Companies";
import { Programs } from "./Programs/Programs";
import { Factions } from "./Faction/Factions";
import { Player } from "./Player";
import { PlayerOwnedSourceFile } from "./SourceFile/PlayerOwnedSourceFile";
import { AllServers } from "./Server/AllServers";
import { GetServerByHostname } from "./Server/ServerHelpers";
import { hackWorldDaemon } from "./RedPill";
import { StockMarket } from "./StockMarket/StockMarket";
import { Bladeburner } from "./Bladeburner/Bladeburner";
import { Stock } from "./StockMarket/Stock";
import { Engine } from "./engine";
import { saveObject } from "./SaveObject";

import { dialogBoxCreate } from "../utils/DialogBox";
import { createElement } from "../utils/uiHelpers/createElement";
import { removeElementById } from "../utils/uiHelpers/removeElementById";
import { Money } from "./ui/React/Money";

import React from "react";
import ReactDOM from "react-dom";

const Component = React.Component;

// Update as additional BitNodes get implemented
const validSFN = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

// Some dev menu buttons just add a lot of something for convenience
const tonsPP = 1e27;
const tonsP = 1e12;

class ValueAdjusterComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.setValue = this.setValue.bind(this);
  }

  setValue(event) {
    this.setState({ value: parseFloat(event.target.value) });
  }

  render() {
    const { title, add, subtract, reset } = this.props;
    return (
      <>
        <button
          className="std-button add-exp-button"
          onClick={() => add(this.state.value)}
        >
          +
        </button>
        <input
          className="text-input exp-input"
          type="number"
          placeholder={`+/- ${title}`}
          value={this.state.value}
          onChange={this.setValue}
        ></input>
        <button
          className="std-button remove-exp-button"
          onClick={() => subtract(this.state.value)}
        >
          -
        </button>
        <button className="std-button" onClick={reset}>
          Reset
        </button>
      </>
    );
  }
}

class DevMenuComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      company: "ECorp",
      faction: "Illuminati",
      program: "NUKE.exe",
      server: "home",
      augmentation: "Augmented Targeting I",
      codingcontract: "Find Largest Prime Factor",
    };

    this.setSF = this.setSF.bind(this);
    this.setAllSF = this.setAllSF.bind(this);
    this.clearExploits = this.clearExploits.bind(this);
    this.processStocks = this.processStocks.bind(this);
    this.setStockPrice = this.setStockPrice.bind(this);
    this.viewStockCaps = this.viewStockCaps.bind(this);

    this.setFactionDropdown = this.setFactionDropdown.bind(this);
    this.setCompanyDropdown = this.setCompanyDropdown.bind(this);
    this.setProgramDropdown = this.setProgramDropdown.bind(this);
    this.setServerDropdown = this.setServerDropdown.bind(this);
    this.setAugmentationDropdown = this.setAugmentationDropdown.bind(this);
    this.setCodingcontractDropdown = this.setCodingcontractDropdown.bind(this);

    this.receiveInvite = this.receiveInvite.bind(this);
    this.modifyFactionRep = this.modifyFactionRep.bind(this);
    this.resetFactionRep = this.resetFactionRep.bind(this);
    this.modifyFactionFavor = this.modifyFactionFavor.bind(this);
    this.resetFactionFavor = this.resetFactionFavor.bind(this);
    this.queueAug = this.queueAug.bind(this);
    this.addProgram = this.addProgram.bind(this);
    this.rootServer = this.rootServer.bind(this);
    this.minSecurity = this.minSecurity.bind(this);
    this.maxMoney = this.maxMoney.bind(this);
    this.modifyCompanyRep = this.modifyCompanyRep.bind(this);
    this.resetCompanyRep = this.resetCompanyRep.bind(this);
    this.modifyCompanyFavor = this.modifyCompanyFavor.bind(this);
    this.resetCompanyFavor = this.resetCompanyFavor.bind(this);
    this.specificContract = this.specificContract.bind(this);
  }

  setFactionDropdown(event) {
    this.setState({ faction: event.target.value });
  }

  setCompanyDropdown(event) {
    this.setState({ company: event.target.value });
  }

  setProgramDropdown(event) {
    this.setState({ program: event.target.value });
  }

  setServerDropdown(event) {
    this.setState({ server: event.target.value });
  }

  setAugmentationDropdown(event) {
    this.setState({ augmentation: event.target.value });
  }

  setCodingcontractDropdown(event) {
    this.setState({ codingcontract: event.target.value });
  }

  addMoney(n) {
    return function () {
      Player.gainMoney(n);
    };
  }

  upgradeRam() {
    Player.getHomeComputer().maxRam *= 2;
  }

  quickB1tFlum3() {
    hackWorldDaemon(Player.bitNodeN, true, true);
  }

  b1tflum3() {
    hackWorldDaemon(Player.bitNodeN, true);
  }

  quickHackW0r1dD43m0n() {
    hackWorldDaemon(Player.bitNodeN, false, true);
  }

  hackW0r1dD43m0n() {
    hackWorldDaemon(Player.bitNodeN);
  }

  modifyExp(stat, modifier) {
    return function (exp) {
      switch (stat) {
        case "hacking":
          if (exp) {
            Player.gainHackingExp(exp * modifier);
          }
          break;
        case "strength":
          if (exp) {
            Player.gainStrengthExp(exp * modifier);
          }
          break;
        case "defense":
          if (exp) {
            Player.gainDefenseExp(exp * modifier);
          }
          break;
        case "dexterity":
          if (exp) {
            Player.gainDexterityExp(exp * modifier);
          }
          break;
        case "agility":
          if (exp) {
            Player.gainAgilityExp(exp * modifier);
          }
          break;
        case "charisma":
          if (exp) {
            Player.gainCharismaExp(exp * modifier);
          }
          break;
        case "intelligence":
          if (exp) {
            Player.gainIntelligenceExp(exp * modifier);
          }
          break;
      }
      Player.updateSkillLevels();
    };
  }

  modifyKarma(modifier) {
    return function (amt) {
      Player.karma += amt * modifier;
    };
  }

  tonsOfExp() {
    Player.gainHackingExp(tonsPP);
    Player.gainStrengthExp(tonsPP);
    Player.gainDefenseExp(tonsPP);
    Player.gainDexterityExp(tonsPP);
    Player.gainAgilityExp(tonsPP);
    Player.gainCharismaExp(tonsPP);
    Player.gainIntelligenceExp(tonsPP);
    Player.updateSkillLevels();
  }

  resetAllExp() {
    Player.hacking_exp = 0;
    Player.strength_exp = 0;
    Player.defense_exp = 0;
    Player.dexterity_exp = 0;
    Player.agility_exp = 0;
    Player.charisma_exp = 0;
    Player.intelligence_exp = 0;
    Player.updateSkillLevels();
  }

  resetExperience(stat) {
    return function () {
      switch (stat) {
        case "hacking":
          Player.hacking_exp = 0;
          break;
        case "strength":
          Player.strength_exp = 0;
          break;
        case "defense":
          Player.defense_exp = 0;
          break;
        case "dexterity":
          Player.dexterity_exp = 0;
          break;
        case "agility":
          Player.agility_exp = 0;
          break;
        case "charisma":
          Player.charisma_exp = 0;
          break;
        case "intelligence":
          Player.intelligence_exp = 0;
          break;
      }
      Player.updateSkillLevels();
    };
  }

  resetKarma() {
    return function () {
      Player.karma = 0;
    };
  }

  enableIntelligence() {
    if (Player.intelligence === 0) {
      Player.intelligence = 1;
      Player.updateSkillLevels();
    }
  }

  disableIntelligence() {
    Player.intelligence_exp = 0;
    Player.intelligence = 0;
    Player.updateSkillLevels();
  }

  receiveInvite() {
    Player.receiveInvite(this.state.faction);
  }

  receiveAllInvites() {
    for (const i in Factions) {
      Player.receiveInvite(Factions[i].name);
    }
  }

  modifyFactionRep(modifier) {
    return (reputation) => {
      const fac = Factions[this.state.faction];
      if (fac != null && !isNaN(reputation)) {
        fac.playerReputation += reputation * modifier;
      }
    };
  }

  resetFactionRep() {
    const fac = Factions[this.state.faction];
    if (fac != null) {
      fac.playerReputation = 0;
    }
  }

  modifyFactionFavor(modifier) {
    return (favor) => {
      const fac = Factions[this.state.faction];
      if (fac != null && !isNaN(favor)) {
        fac.favor += favor * modifier;
      }
    };
  }

  resetFactionFavor() {
    const fac = Factions[this.state.faction];
    if (fac != null) {
      fac.favor = 0;
    }
  }

  tonsOfRep() {
    for (const i in Factions) {
      Factions[i].playerReputation = tonsPP;
    }
  }

  resetAllRep() {
    for (const i in Factions) {
      Factions[i].playerReputation = 0;
    }
  }

  tonsOfFactionFavor() {
    for (const i in Factions) {
      Factions[i].favor = tonsPP;
    }
  }

  resetAllFactionFavor() {
    for (const i in Factions) {
      Factions[i].favor = 0;
    }
  }

  queueAug() {
    Player.queueAugmentation(this.state.augmentation);
  }

  queueAllAugs() {
    for (const i in AugmentationNames) {
      const augName = AugmentationNames[i];
      Player.queueAugmentation(augName);
    }
  }

  setSF(sfN, sfLvl) {
    return function () {
      if (sfLvl === 0) {
        Player.sourceFiles = Player.sourceFiles.filter((sf) => sf.n !== sfN);
        return;
      }

      if (!Player.sourceFiles.some((sf) => sf.n === sfN)) {
        Player.sourceFiles.push(new PlayerOwnedSourceFile(sfN, sfLvl));
        return;
      }

      for (let i = 0; i < Player.sourceFiles.length; i++) {
        if (Player.sourceFiles[i].n === sfN) {
          Player.sourceFiles[i].lvl = sfLvl;
        }
      }
    };
  }

  setAllSF(sfLvl) {
    return () => {
      for (let i = 0; i < validSFN.length; i++) {
        this.setSF(validSFN[i], sfLvl)();
      }
    };
  }

  clearExploits() {
    Player.exploits = [];
  }

  addProgram() {
    const program = this.state.program;
    if (!Player.hasProgram(program)) {
      Player.getHomeComputer().programs.push(program);
    }
  }

  addAllPrograms() {
    for (const i in Programs) {
      if (!Player.hasProgram(Programs[i].name)) {
        Player.getHomeComputer().programs.push(Programs[i].name);
      }
    }
  }

  rootServer() {
    const serverName = this.state.server;
    const server = GetServerByHostname(serverName);

    server.hasAdminRights = true;
    server.sshPortOpen = true;
    server.ftpPortOpen = true;
    server.smtpPortOpen = true;
    server.httpPortOpen = true;
    server.sqlPortOpen = true;
    server.openPortCount = 5;
  }

  rootAllServers() {
    for (const i in AllServers) {
      AllServers[i].hasAdminRights = true;
      AllServers[i].sshPortOpen = true;
      AllServers[i].ftpPortOpen = true;
      AllServers[i].smtpPortOpen = true;
      AllServers[i].httpPortOpen = true;
      AllServers[i].sqlPortOpen = true;
      AllServers[i].openPortCount = 5;
    }
  }

  minSecurity() {
    const serverName = this.state.server;
    const server = GetServerByHostname(serverName);
    server.hackDifficulty = server.minDifficulty;
  }

  minAllSecurity() {
    for (const i in AllServers) {
      AllServers[i].hackDifficulty = AllServers[i].minDifficulty;
    }
  }

  maxMoney() {
    const serverName = this.state.server;
    const server = GetServerByHostname(serverName);
    server.moneyAvailable = server.moneyMax;
  }

  maxAllMoney() {
    for (const i in AllServers) {
      AllServers[i].moneyAvailable = AllServers[i].moneyMax;
    }
  }

  modifyCompanyRep(modifier) {
    return (reputation) => {
      const company = Companies[this.state.company];
      if (company != null && !isNaN(reputation)) {
        company.playerReputation += reputation * modifier;
      }
    };
  }

  resetCompanyRep() {
    const company = Companies[this.state.company];
    company.playerReputation = 0;
  }

  modifyCompanyFavor(modifier) {
    return (favor) => {
      const company = Companies[this.state.company];
      if (company != null && !isNaN(favor)) {
        company.favor += favor * modifier;
      }
    };
  }

  resetCompanyFavor() {
    const company = Companies[this.state.company];
    company.favor = 0;
  }

  tonsOfRepCompanies() {
    for (const c in Companies) {
      Companies[c].playerReputation = tonsP;
    }
  }

  resetAllRepCompanies() {
    for (const c in Companies) {
      Companies[c].playerReputation = 0;
    }
  }

  tonsOfFavorCompanies() {
    for (const c in Companies) {
      Companies[c].favor = tonsP;
    }
  }

  resetAllFavorCompanies() {
    for (const c in Companies) {
      Companies[c].favor = 0;
    }
  }

  modifyBladeburnerRank(modify) {
    return function (rank) {
      if (Player.bladeburner) {
        Player.bladeburner.changeRank(Player, rank * modify);
      }
    };
  }

  resetBladeburnerRank() {
    Player.bladeburner.rank = 0;
    Player.bladeburner.maxRank = 0;
  }

  addTonsBladeburnerRank() {
    if (Player.bladeburner) {
      Player.bladeburner.changeRank(Player, tonsP);
    }
  }

  modifyBladeburnerCycles(modify) {
    return function (cycles) {
      if (Player.bladeburner) {
        Player.bladeburner.storedCycles += cycles * modify;
      }
    };
  }

  resetBladeburnerCycles() {
    if (Player.bladeburner) {
      Player.bladeburner.storedCycles = 0;
    }
  }

  addTonsBladeburnerCycles() {
    if (Player.bladeburner) {
      Player.bladeburner.storedCycles += tonsP;
    }
  }

  addTonsGangCycles() {
    if (Player.gang) {
      Player.gang.storedCycles = tonsP;
    }
  }

  modifyGangCycles(modify) {
    return function (cycles) {
      if (Player.gang) {
        Player.gang.storedCycles += cycles * modify;
      }
    };
  }

  resetGangCycles() {
    if (Player.gang) {
      Player.gang.storedCycles = 0;
    }
  }

  addTonsCorporationFunds() {
    if (Player.corporation) {
      Player.corporation.funds = Player.corporation.funds.plus(1e99);
    }
  }

  addTonsCorporationCycles() {
    if (Player.corporation) {
      Player.corporation.storedCycles = tonsP;
    }
  }

  modifyCorporationCycles(modify) {
    return function (cycles) {
      if (Player.corporation) {
        Player.corporation.storedCycles += cycles * modify;
      }
    };
  }

  resetCorporationCycles() {
    if (Player.corporation) {
      Player.corporation.storedCycles = 0;
    }
  }

  finishCorporationProducts() {
    if (!Player.corporation) return;
    Player.corporation.divisions.forEach((div) => {
      Object.keys(div.products).forEach(
        (prod) => (div.products[prod].prog = 99.9),
      );
    });
  }

  addCorporationResearch() {
    if (!Player.corporation) return;
    Player.corporation.divisions.forEach((div) => {
      div.sciResearch.qty += 1e10;
    });
  }

  specificContract() {
    generateContract({
      problemType: this.state.codingcontract,
      server: "home",
    });
  }

  processStocks(sub) {
    const inputSymbols = document
      .getElementById("dev-stock-symbol")
      .value.toString()
      .replace(/\s/g, "");

    let match = function () {
      return true;
    };

    if (inputSymbols !== "" && inputSymbols !== "all") {
      match = function (symbol) {
        return inputSymbols.split(",").includes(symbol);
      };
    }

    for (const name in StockMarket) {
      if (StockMarket.hasOwnProperty(name)) {
        const stock = StockMarket[name];
        if (stock instanceof Stock && match(stock.symbol)) {
          sub(stock);
        }
      }
    }
  }

  setStockPrice() {
    const price = parseFloat(document.getElementById("dev-stock-price").value);

    if (!isNaN(price)) {
      this.processStocks((stock) => {
        stock.price = price;
      });
    }
  }

  viewStockCaps() {
    let stocks = [];
    this.processStocks((stock) => {
      stocks.push(
        <tr key={stock.symbol}>
          <td>{stock.symbol}</td>
          <td style={{ textAlign: "right" }}>
            <Money money={stock.cap} />
          </td>
        </tr>,
      );
    });
    dialogBoxCreate(
      <table>
        <tbody>
          <tr>
            <th>Stock</th>
            <th>Price cap</th>
          </tr>
          {stocks}
        </tbody>
      </table>,
    );
  }

  sleeveMaxAllShock() {
    for (let i = 0; i < Player.sleeves.length; ++i) {
      Player.sleeves[i].shock = 0;
    }
  }

  sleeveClearAllShock() {
    for (let i = 0; i < Player.sleeves.length; ++i) {
      Player.sleeves[i].shock = 100;
    }
  }

  sleeveSyncMaxAll() {
    for (let i = 0; i < Player.sleeves.length; ++i) {
      Player.sleeves[i].sync = 100;
    }
  }

  sleeveSyncClearAll() {
    for (let i = 0; i < Player.sleeves.length; ++i) {
      Player.sleeves[i].sync = 0;
    }
  }

  timeskip(time) {
    return () => {
      Player.lastUpdate -= time;
      Engine._lastUpdate -= time;
      saveObject.saveGame(Engine.indexedDb);
      setTimeout(() => location.reload(), 1000);
    };
  }

  render() {
    let factions = [];
    for (const i in Factions) {
      factions.push(
        <option key={Factions[i].name} value={Factions[i].name}>
          {Factions[i].name}
        </option>,
      );
    }

    let augs = [];
    for (const i in AugmentationNames) {
      augs.push(
        <option key={AugmentationNames[i]} value={AugmentationNames[i]}>
          {AugmentationNames[i]}
        </option>,
      );
    }

    let programs = [];
    for (const i in Programs) {
      programs.push(
        <option key={Programs[i].name} value={Programs[i].name}>
          {Programs[i].name}
        </option>,
      );
    }

    let sourceFiles = [];
    validSFN.forEach((i) => sourceFiles.push(
        <tr key={"sf-" + i}>
          <td>
            <span className="text">SF-{i}:</span>
          </td>
          <td>
            <button
              className="std-button touch-right"
              onClick={this.setSF(i, 0)}
            >
              0
            </button>
            <button
              className="std-button touch-sides"
              onClick={this.setSF(i, 1)}
            >
              1
            </button>
            <button
              className="std-button touch-sides"
              onClick={this.setSF(i, 2)}
            >
              2
            </button>
            <button
              className="std-button touch-left"
              onClick={this.setSF(i, 3)}
            >
              3
            </button>
          </td>
        </tr>,
      ),
    );

    let servers = [];
    for (const i in AllServers) {
      const hn = AllServers[i].hostname;
      servers.push(
        <option key={hn} value={hn}>
          {hn}
        </option>,
      );
    }

    let companies = [];
    for (const c in Companies) {
      const name = Companies[c].name;
      companies.push(
        <option key={name} value={name}>
          {name}
        </option>,
      );
    }

    const contractTypes = [];
    const contractTypeNames = Object.keys(CodingContractTypes);
    for (let i = 0; i < contractTypeNames.length; i++) {
      const name = contractTypeNames[i];
      contractTypes.push(
        <option key={name} value={name}>
          {name}
        </option>,
      );
    }

    return (
      <div className="col">
        <div className="row">
          <h1>
            Development Menu - Only meant to be used for testing/debugging
          </h1>
        </div>
        <div className="row">
          <h2>Generic</h2>
        </div>
        <div className="row">
          <button className="std-button" onClick={this.addMoney(1e6)}>
            Add <Money money={1e6} />
          </button>
          <button className="std-button" onClick={this.addMoney(1e9)}>
            Add <Money money={1e9} />
          </button>
          <button className="std-button" onClick={this.addMoney(1e12)}>
            Add <Money money={1e12} />
          </button>
          <button className="std-button" onClick={this.addMoney(1e15)}>
            Add <Money money={1000e12} />
          </button>
          <button className="std-button" onClick={this.addMoney(Infinity)}>
            Add <Money money={Infinity} />
          </button>
          <button className="std-button" onClick={this.upgradeRam}>
            Upgrade Home Computer's RAM
          </button>
        </div>
        <div className="row">
          <button className="std-button" onClick={this.quickB1tFlum3}>
            Quick b1t_flum3.exe
          </button>
          <button className="std-button" onClick={this.b1tflum3}>
            Run b1t_flum3.exe
          </button>
          <button className="std-button" onClick={this.quickHackW0r1dD43m0n}>
            Quick w0rld_d34m0n
          </button>
          <button className="std-button" onClick={this.hackW0r1dD43m0n}>
            Hack w0rld_d34m0n
          </button>
        </div>
        <div className="row">
          <div className="col">
            <div className="row">
              <h2>Experience / Stats</h2>
            </div>
            <table>
              <tbody>
                <tr>
                  <td>
                    <span className="text text-center">All:</span>
                  </td>
                  <td>
                    <button
                      className="std-button tooltip"
                      onClick={this.tonsOfExp}
                    >
                      Tons of exp
                      <span className="tooltiptext">
                        Sometimes you just need a ton of experience in every
                        stat
                      </span>
                    </button>
                    <button
                      className="std-button tooltip"
                      onClick={this.resetAllExp}
                    >
                      Reset
                      <span className="tooltiptext">
                        Reset all experience to 0
                      </span>
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text text-center">Hacking:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="hacking exp"
                      add={this.modifyExp("hacking", 1)}
                      subtract={this.modifyExp("hacking", -1)}
                      reset={this.resetExperience("hacking")}
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text text-center">Strength:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="strength exp"
                      add={this.modifyExp("strength", 1)}
                      subtract={this.modifyExp("strength", -1)}
                      reset={this.resetExperience("strength")}
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text text-center">Defense:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="defense exp"
                      add={this.modifyExp("defense", 1)}
                      subtract={this.modifyExp("defense", -1)}
                      reset={this.resetExperience("defense")}
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text text-center">Dexterity:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="dexterity exp"
                      add={this.modifyExp("dexterity", 1)}
                      subtract={this.modifyExp("dexterity", -1)}
                      reset={this.resetExperience("dexterity")}
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text text-center">Agility:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="agility exp"
                      add={this.modifyExp("agility", 1)}
                      subtract={this.modifyExp("agility", -1)}
                      reset={this.resetExperience("agility")}
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text text-center">Charisma:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="charisma exp"
                      add={this.modifyExp("charisma", 1)}
                      subtract={this.modifyExp("charisma", -1)}
                      reset={this.resetExperience("charisma")}
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text text-center">Intelligence:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="intelligence exp"
                      add={this.modifyExp("intelligence", 1)}
                      subtract={this.modifyExp("intelligence", -1)}
                      reset={this.resetExperience("intelligence")}
                    />
                  </td>
                  <td>
                    <button
                      className="std-button"
                      onClick={this.enableIntelligence}
                    >
                      Enable
                    </button>
                  </td>
                  <td>
                    <button
                      className="std-button"
                      onClick={this.disableIntelligence}
                    >
                      Disable
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text text-center">Karma:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="karma"
                      add={this.modifyKarma(1)}
                      subtract={this.modifyKarma(-1)}
                      reset={this.resetKarma()}
                    />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="row">
              <h2>Factions</h2>
            </div>
            <table>
              <tbody>
                <tr>
                  <td>
                    <span className="text">Faction:</span>
                  </td>
                  <td>
                    <select
                      id="factions-dropdown"
                      className="dropdown exp-input"
                      onChange={this.setFactionDropdown}
                      value={this.state.faction}
                    >
                      {factions}
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">Invites:</span>
                  </td>
                  <td>
                    <button className="std-button" onClick={this.receiveInvite}>
                      Receive invite from faction
                    </button>
                  </td>
                  <td>
                    <button
                      className="std-button"
                      onClick={this.receiveAllInvites}
                    >
                      Receive all Invites
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">Reputation:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="reputation"
                      add={this.modifyFactionRep(1)}
                      subtract={this.modifyFactionRep(-1)}
                      reset={this.resetFactionRep}
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">Favor:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="favor"
                      add={this.modifyFactionFavor(1)}
                      subtract={this.modifyFactionFavor(-1)}
                      reset={this.resetFactionFavor}
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">All Reputation:</span>
                  </td>
                  <td>
                    <button className="std-button" onClick={this.tonsOfRep}>
                      Tons
                    </button>
                    <button className="std-button" onClick={this.resetAllRep}>
                      Reset
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">All Favor:</span>
                  </td>
                  <td>
                    <button
                      className="std-button"
                      onClick={this.tonsOfFactionFavor}
                    >
                      Tons
                    </button>
                    <button
                      className="std-button"
                      onClick={this.resetAllFactionFavor}
                    >
                      Reset
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="row">
              <h2>Augmentations</h2>
            </div>
            <table>
              <tbody>
                <tr>
                  <td>
                    <span className="text">Aug:</span>
                  </td>
                  <td>
                    <select
                      id="dev-augs-dropdown"
                      className="dropdown"
                      onChange={this.setAugmentationDropdown}
                      value={this.state.augmentation}
                    >
                      {augs}
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">Queue:</span>
                  </td>
                  <td>
                    <button className="std-button" onClick={this.queueAug}>
                      One
                    </button>
                    <button className="std-button" onClick={this.queueAllAugs}>
                      All
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="row">
              <h2>Source-Files</h2>
            </div>
            <table>
              <tbody>
                <tr>
                  <td>
                    <span className="text">Exploits:</span>
                  </td>
                  <td>
                    <button
                      className="std-button touch-right"
                      onClick={this.clearExploits()}
                    >
                      Clear
                    </button>
                  </td>
                </tr>
                <tr key={"sf-all"}>
                  <td>
                    <span className="text">All:</span>
                  </td>
                  <td>
                    <button
                      className="std-button touch-right"
                      onClick={this.setAllSF(0)}
                    >
                      0
                    </button>
                    <button
                      className="std-button touch-sides"
                      onClick={this.setAllSF(1)}
                    >
                      1
                    </button>
                    <button
                      className="std-button touch-sides"
                      onClick={this.setAllSF(2)}
                    >
                      2
                    </button>
                    <button
                      className="std-button touch-left"
                      onClick={this.setAllSF(3)}
                    >
                      3
                    </button>
                  </td>
                </tr>
                {sourceFiles}
              </tbody>
            </table>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="row">
              <h2>Programs</h2>
            </div>
            <table>
              <tbody>
                <tr>
                  <td>
                    <span className="text">Program:</span>
                  </td>
                  <td>
                    <select
                      id="dev-programs-dropdown"
                      className="dropdown"
                      onChange={this.setProgramDropdown}
                      value={this.state.program}
                    >
                      {programs}
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">Add:</span>
                  </td>
                  <td>
                    <button className="std-button" onClick={this.addProgram}>
                      One
                    </button>
                    <button
                      className="std-button"
                      onClick={this.addAllPrograms}
                    >
                      All
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="row">
              <h2>Servers</h2>
            </div>
            <table>
              <tbody>
                <tr>
                  <td>
                    <span className="text">Server:</span>
                  </td>
                  <td colSpan="2">
                    <select
                      id="dev-servers-dropdown"
                      className="dropdown"
                      onChange={this.setServerDropdown}
                      value={this.state.server}
                    >
                      {servers}
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">Root:</span>
                  </td>
                  <td>
                    <button className="std-button" onClick={this.rootServer}>
                      Root one
                    </button>
                  </td>
                  <td>
                    <button
                      className="std-button"
                      onClick={this.rootAllServers}
                    >
                      Root all
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">Security:</span>
                  </td>
                  <td>
                    <button className="std-button" onClick={this.minSecurity}>
                      Min one
                    </button>
                  </td>
                  <td>
                    <button
                      className="std-button"
                      onClick={this.minAllSecurity}
                    >
                      Min all
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">Money:</span>
                  </td>
                  <td>
                    <button className="std-button" onClick={this.maxMoney}>
                      Max one
                    </button>
                  </td>
                  <td>
                    <button className="std-button" onClick={this.maxAllMoney}>
                      Max all
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="row">
              <h2>Companies</h2>
            </div>
            <table>
              <tbody>
                <tr>
                  <td>
                    <span className="text">Company:</span>
                  </td>
                  <td colSpan="3">
                    <select
                      id="dev-companies-dropdown"
                      className="dropdown"
                      onChange={this.setCompanyDropdown}
                      value={this.state.company}
                    >
                      {companies}
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">Reputation:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="reputation"
                      add={this.modifyCompanyRep(1)}
                      subtract={this.modifyCompanyRep(-1)}
                      reset={this.resetCompanyRep}
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">Favor:</span>
                  </td>
                  <td>
                    <ValueAdjusterComponent
                      title="favor"
                      add={this.modifyCompanyFavor(1)}
                      subtract={this.modifyCompanyFavor(-1)}
                      reset={this.resetCompanyFavor}
                    />
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">All Reputation:</span>
                  </td>
                  <td>
                    <button
                      className="std-button"
                      onClick={this.tonsOfRepCompanies}
                    >
                      Tons
                    </button>
                    <button
                      className="std-button"
                      onClick={this.resetAllRepCompanies}
                    >
                      Reset
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span className="text">All Favor:</span>
                  </td>
                  <td>
                    <button
                      className="std-button"
                      onClick={this.tonsOfFavorCompanies}
                    >
                      Tons
                    </button>
                    <button
                      className="std-button"
                      onClick={this.resetAllFavorCompanies}
                    >
                      Reset
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {Player.bladeburner instanceof Bladeburner && (
          <div className="row">
            <div className="col">
              <div className="row">
                <h2>Bladeburner</h2>
              </div>
              <table>
                <tbody>
                  <tr>
                    <td>
                      <span className="text">Rank:</span>
                    </td>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.addTonsBladeburnerRank}
                      >
                        Tons
                      </button>
                    </td>
                    <td>
                      <ValueAdjusterComponent
                        title="rank"
                        add={this.modifyBladeburnerRank(1)}
                        subtract={this.modifyBladeburnerRank(-1)}
                        reset={this.resetBladeburnerRank}
                      />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span className="text">Cycles:</span>
                    </td>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.addTonsBladeburnerCycles}
                      >
                        Tons
                      </button>
                    </td>
                    <td>
                      <ValueAdjusterComponent
                        title="cycles"
                        add={this.modifyBladeburnerCycles(1)}
                        subtract={this.modifyBladeburnerCycles(-1)}
                        reset={this.resetBladeburnerCycles}
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        )}

        {Player.inGang() && (
          <div className="row">
            <div className="col">
              <div className="row">
                <h2>Gang</h2>
              </div>
              <table>
                <tbody>
                  <tr>
                    <td>
                      <span className="text">Cycles:</span>
                    </td>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.addTonsGangCycles}
                      >
                        Tons
                      </button>
                    </td>
                    <td>
                      <ValueAdjusterComponent
                        title="cycles"
                        add={this.modifyGangCycles(1)}
                        subtract={this.modifyGangCycles(-1)}
                        reset={this.resetGangCycles}
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        )}

        {Player.hasCorporation() && (
          <div className="row">
            <div className="col">
              <div className="row">
                <h2>Corporation</h2>
              </div>
              <table>
                <tbody>
                  <tr>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.addTonsCorporationFunds}
                      >
                        Tons of funds
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span className="text">Cycles:</span>
                    </td>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.addTonsCorporationCycles}
                      >
                        Tons
                      </button>
                    </td>
                    <td>
                      <ValueAdjusterComponent
                        title="cycles"
                        add={this.modifyCorporationCycles(1)}
                        subtract={this.modifyCorporationCycles(-1)}
                        reset={this.resetCorporationCycles}
                      />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.finishCorporationProducts}
                      >
                        Finish products
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.addCorporationResearch}
                      >
                        Tons of research
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        )}

        <div className="row">
          <div className="col">
            <div className="row">
              <h2>Coding Contracts</h2>
            </div>
            <table>
              <tbody>
                <tr>
                  <td>
                    <button
                      className="std-button"
                      onClick={generateRandomContract}
                    >
                      Generate Random Contract
                    </button>
                    <button
                      className="std-button"
                      onClick={generateRandomContractOnHome}
                    >
                      Generate Random Contract on Home Comp
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <select
                      id="contract-types-dropdown"
                      className="dropdown"
                      onChange={this.setCodingcontractDropdown}
                      value={this.state.codingcontract}
                    >
                      {contractTypes}
                    </select>
                    <button
                      className="std-button"
                      onClick={this.specificContract}
                    >
                      Generate Specified Contract Type on Home Comp
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {Player.hasWseAccount && (
          <div className="row">
            <div className="col">
              <div className="row">
                <h2>Stock Market</h2>
              </div>
              <table>
                <tbody>
                  <tr>
                    <td>
                      <span className="text">Symbol:</span>
                    </td>
                    <td>
                      <input
                        id="dev-stock-symbol"
                        className="text-input"
                        type="text"
                        placeholder="symbol/'all'"
                      />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span className="text">Price:</span>
                    </td>
                    <td>
                      <input
                        id="dev-stock-price"
                        className="text-input"
                        type="number"
                        placeholder="$$$"
                      />
                      <button
                        className="std-button"
                        onClick={this.setStockPrice}
                      >
                        Set
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span className="text">Caps:</span>
                    </td>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.viewStockCaps}
                      >
                        View stock caps
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        )}

        {Player.sleeves.length > 0 && (
          <div className="row">
            <div className="col">
              <div className="row">
                <h2>Sleeves</h2>
              </div>
              <table>
                <tbody>
                  <tr>
                    <td>
                      <span className="text">Shock:</span>
                    </td>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.sleeveMaxAllShock}
                      >
                        Max all
                      </button>
                    </td>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.sleeveClearAllShock}
                      >
                        Clear all
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <span className="text">Sync:</span>
                    </td>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.sleeveSyncMaxAll}
                      >
                        Max all
                      </button>
                    </td>
                    <td>
                      <button
                        className="std-button"
                        onClick={this.sleeveSyncClearAll}
                      >
                        Clear all
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        )}

        <div className="row">
          <div className="col">
            <div className="row">
              <h2>Offline time skip:</h2>
            </div>
            <div className="row">
              <button className="std-button" onClick={this.timeskip(60 * 1000)}>
                1 minute
              </button>
              <button
                className="std-button"
                onClick={this.timeskip(60 * 60 * 1000)}
              >
                1 hour
              </button>
              <button
                className="std-button"
                onClick={this.timeskip(24 * 60 * 60 * 1000)}
              >
                1 day
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const devMenuContainerId = "dev-menu-container";

export function createDevMenu() {
  if (process.env.NODE_ENV !== "development") {
    throw new Error(
      "Cannot create Dev Menu because you are not in a dev build",
    );
  }

  // Add everything to container, then append to main menu
  const devMenuContainer = createElement("div", {
    class: "generic-menupage-container",
    id: devMenuContainerId,
  });

  const entireGameContainer = document.getElementById("entire-game-container");
  if (entireGameContainer == null) {
    throw new Error("Could not find entire-game-container DOM element");
  }
  entireGameContainer.appendChild(devMenuContainer);

  ReactDOM.render(<DevMenuComponent />, devMenuContainer);
}

export function closeDevMenu() {
  removeElementById(devMenuContainerId);
}