import { type ResourceGenerator } from "@idle-economy/engine";
import { observer } from "mobx-react-lite";
import { root } from "./state/Root";
import { ResourcesView } from "./ResourcesView";
import { ProgressView } from "./ProgressView";

export const Page = observer(function () {


    function handleGeneratorUpgradeClick(generator: ResourceGenerator): void {
        generator.upgrade();
    }


    return (<>
        <div>Resources: <ResourcesView resources={root.resources.toObject()} /></div>
        <div>
            {
                root.generators.filter((gen) => gen.isVisible).map((gen) => (<button className={`generator ${gen.rule.name}`} key={gen.rule.name} disabled={!gen.isOpen} onClick={() => handleGeneratorUpgradeClick(gen)}>
                    <div className="name">{gen.rule.name}</div>
                    <div>LEVEL {gen.level}</div>
                    <div>+<ResourcesView resources={gen.generation.toObject()} /></div>
                    {/* <div>+<ResourcesView resources={gen.generation.toObject()} /> / {gen.period} sec</div> */}
                    <div><ProgressView period={gen.period} progress={gen.progress} /></div>
                    {
                        true
                            ? <div>{gen.level} ⇒ {gen.level + 1} for <ResourcesView resources={gen.openPrice.toObject()} /></div>
                            : <></>
                    }
                </button>))
            }
        </div>

    </>)
});