import { observer } from 'mobx-react-lite';
import type { GameStore } from '../game/GameStore';
import { costForNextLevel, UPGRADE_LIST } from '../game/upgrades';
import { COIN_SPRITE } from '../game/sprites';
import PixelSprite from './PixelSprite';

interface Props {
  store: GameStore;
}

function Sidebar({ store }: Props) {
  return (
    <div className="sidebar">
      <h2 className="sidebar__title">Апгрейды</h2>
      <div className="upgrade-list">
        {UPGRADE_LIST.map((def) => {
          const level = store.upgradeLevels[def.id];
          const cost = costForNextLevel(def, level);
          const canAfford = store.inventory.coins >= cost;

          return (
            <button
              key={def.id}
              type="button"
              className="upgrade-btn"
              disabled={!canAfford}
              onClick={() => store.buyUpgrade(def.id)}
            >
              <div className="upgrade-btn__header">
                <span className="upgrade-btn__name">{def.name}</span>
                <span className="upgrade-btn__level">Ур. {level}</span>
              </div>
              <div className="upgrade-btn__effects">
                <span>{def.formatEffect(def.effectAtLevel(level))}</span>
                <span className="upgrade-btn__arrow">&gt;</span>
                <span>{def.formatEffect(def.effectAtLevel(level + 1))}</span>
              </div>
              <div className="upgrade-btn__cost">
                <PixelSprite pixels={COIN_SPRITE} size={16} />
                <span>{cost}</span>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

export default observer(Sidebar);