import { observer } from "mobx-react-lite";
import { ResourceStringView } from "./ResourceStringView";
import { Upgrade } from "../model/upgrade";
import { isResourceSetZero } from "../utils/resources";

type Props = {
    upgrade: Upgrade;
}

export const UpgradeView = observer(function ({ upgrade }: Props) {

    function handleClick(): void {
        if (upgrade.isOpen() && upgrade.isAffordable())
            upgrade.execute();
    }

    let classNames = ['upgrade'];
    if (!upgrade.isOpen())
        classNames.push('closed')

    return <div
        className={classNames.join(' ')}
        onClick={handleClick}
    >
        <div className="name">{upgrade.name}</div>
        {upgrade.level > 0 ? <div className="level">{upgrade.level} ур</div> : <></>}
        <div className="description">{upgrade.description}</div>
        {
            !upgrade.isOpen()
                ? (
                    !isResourceSetZero(upgrade.costToOpen)
                        ? <ResourceStringView className="cost" prefix="Открывается на" resources={upgrade.costToOpen} partial={true} />
                        : <></>
                )
                : (
                    !isResourceSetZero(upgrade.costToBuy)
                        ? <ResourceStringView className="cost" prefix="Покупка" resources={upgrade.costToBuy} partial={true} />
                        : <></>
                )
        }
        {/* <div>Открывается на: <ResourceStringView className="cost" resources={upgrade.costToOpen} partial={true} /></div>
        <div>Покупка: <ResourceStringView className="cost" resources={upgrade.costToBuy} partial={true} /></div> */}
        {/* {
            [...Array(10).keys()].map((lvl: number) => <div>
                {lvl}
                <ResourceStringView className="cost" resources={upgrade.evalCostToUpgrade(lvl)} partial={true} />
                <ResourceStringView className="cost" resources={upgrade.evalCostToStepUpgrade(lvl)} partial={true} />
            </div>)
        } */}
    </div>;
});