import { observer } from 'mobx-react-lite';
import type { GameStore } from '../game/GameStore';
import type { ResourceNode } from '../game/entities/ResourceNode';
import { BUSH_SPRITE, TREE_SPRITE } from '../game/sprites';
import PixelSprite from './PixelSprite';

const NODE_SPRITES = { tree: TREE_SPRITE, bush: BUSH_SPRITE };
const NODE_SIZES = { tree: 64, bush: 40 };

const NodeEntity = observer(function NodeEntity({ node, store }: { node: ResourceNode; store: GameStore }) {
  const isChopping = node.id === store.heldNodeId && store.isChopping;

  return (
    <div>
      <div className={`entity ${node.kind}-shadow`} style={{ left: node.x, top: node.y, zIndex: Math.floor(node.y) - 1 }} />
      <div
        className={`entity ${node.kind} ${isChopping ? 'chopping' : ''}`}
        style={{ left: node.x, top: node.y, zIndex: Math.floor(node.y) }}
        data-node-id={node.id}
      >
        <PixelSprite pixels={NODE_SPRITES[node.kind]} size={NODE_SIZES[node.kind]} />
      </div>
    </div>
  );
});

export default NodeEntity;