/**
 * Root React Component for the Hacknet Node UI
 */
import React from "react";

import { GeneralInfo } from "./GeneralInfo";
import { HacknetNode } from "./HacknetNode";
import { HacknetServer } from "./HacknetServer";
import { HashUpgradePopup } from "./HashUpgradePopup";
import { MultiplierButtons } from "./MultiplierButtons";
import { PlayerInfo } from "./PlayerInfo";
import { PurchaseButton } from "./PurchaseButton";

import { getCostOfNextHacknetNode,
         getCostOfNextHacknetServer,
         hasHacknetServers,
         purchaseHacknet } from "../HacknetHelpers";

import { Player } from "../../Player";

import { createPopup } from "../../ui/React/createPopup";

export const PurchaseMultipliers = Object.freeze({
    "x1": 1,
    "x5": 5,
    "x10": 10,
    "MAX": "MAX",
});

export class HacknetRoot extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            purchaseMultiplier: PurchaseMultipliers.x1,
            totalProduction: 0, // Total production ($ / s) of Hacknet Nodes
        }

        this.createHashUpgradesPopup = this.createHashUpgradesPopup.bind(this);
    }

    componentDidMount() {
        this.recalculateTotalProduction();
    }

    createHashUpgradesPopup() {
        const id = "hacknet-server-hash-upgrades-popup";
        createPopup(id, HashUpgradePopup, { popupId: id, rerender: this.createHashUpgradesPopup });
    }

    recalculateTotalProduction() {
        let total = 0;
        for (let i = 0; i < Player.hacknetNodes.length; ++i) {
            if (hasHacknetServers()) {
                total += Player.hacknetNodes[i].hashRate;
            } else {
                total += Player.hacknetNodes[i].moneyGainRatePerSecond;
            }
        }

        this.setState({
            totalProduction: total,
        });
    }

    setPurchaseMultiplier(mult) {
        this.setState({
            purchaseMultiplier: mult,
        });
    }

    render() {
        // Cost to purchase a new Hacknet Node
        let purchaseCost;
        if (hasHacknetServers()) {
            purchaseCost = getCostOfNextHacknetServer();
        } else {
            purchaseCost = getCostOfNextHacknetNode();
        }

        // onClick event handler for purchase button
        const purchaseOnClick = () => {
            if (purchaseHacknet() >= 0) {
                this.recalculateTotalProduction();
                Player.hashManager.updateCapacity(Player);
            }
        }

        // onClick event handlers for purchase multiplier buttons
        const purchaseMultiplierOnClicks = [
            this.setPurchaseMultiplier.bind(this, PurchaseMultipliers.x1),
            this.setPurchaseMultiplier.bind(this, PurchaseMultipliers.x5),
            this.setPurchaseMultiplier.bind(this, PurchaseMultipliers.x10),
            this.setPurchaseMultiplier.bind(this, PurchaseMultipliers.MAX),
        ];

        // HacknetNode components
        const nodes = Player.hacknetNodes.map((node) => {
            if (hasHacknetServers()) {
                return (
                    <HacknetServer
                        key={node.hostname}
                        node={node}
                        purchaseMultiplier={this.state.purchaseMultiplier}
                        recalculate={this.recalculateTotalProduction.bind(this)}
                    />
                )
            } else {
                return (
                    <HacknetNode
                        key={node.name}
                        node={node}
                        purchaseMultiplier={this.state.purchaseMultiplier}
                        recalculate={this.recalculateTotalProduction.bind(this)}
                    />
                )
            }
        });

        return (
            <div>
                <h1>Hacknet Nodes</h1>
                <GeneralInfo />

                <PurchaseButton cost={purchaseCost} multiplier={this.state.purchaseMultiplier} onClick={purchaseOnClick} />

                <br />
                <div id={"hacknet-nodes-money-multipliers-div"}>
                    <PlayerInfo totalProduction={this.state.totalProduction} />
                    <MultiplierButtons onClicks={purchaseMultiplierOnClicks} purchaseMultiplier={this.state.purchaseMultiplier} />
                </div>

                {
                    hasHacknetServers() &&
                    <button className={"std-button"} onClick={this.createHashUpgradesPopup} style={{display: "block"}}>
                        {"Spend Hashes on Upgrades"}
                    </button>
                }

                <ul id={"hacknet-nodes-list"}>{nodes}</ul>
            </div>
        )
    }
}
