this.container.hitArea = new Pixi.Rectangle( // note: hitarea breaks child onhover: https://github.com/pixijs/pixi.js/issues/5837
      - RenderedChunkConstants.NODE_HITAREA_PX / 2,
      - RenderedChunkConstants.NODE_HITAREA_PX / 2,
      RenderedChunkConstants.NODE_HITAREA_PX,
      RenderedChunkConstants.NODE_HITAREA_PX,
    );

    // this.container.hitArea = new Pixi.Rectangle( // note: hitarea breaks child onhover: https://github.com/pixijs/pixi.js/issues/5837
    //   - RenderedChunkConstants.NODE_HITAREA_PX / 2,
    //   - RenderedChunkConstants.NODE_HITAREA_PX / 2,
    //   RenderedChunkConstants.NODE_HITAREA_PX,
    //   RenderedChunkConstants.NODE_HITAREA_PX,
    // );

import { RenderedChunkConstants } from "./ChunkComponent";

  isActive: boolean;

  fireStateUpdaters: () => void

  public hitAreaDrawn?: Pixi.Graphics; // debug
  tooltipContainer: Pixi.Container | null;

    this.container.buttonMode = true;

    // this.container.hitArea = new Pixi.Rectangle(
    //   - RenderedChunkConstants.NODE_HITAREA_PX / 2,
    //   - RenderedChunkConstants.NODE_HITAREA_PX / 2,
    //   RenderedChunkConstants.NODE_HITAREA_PX,
    //   RenderedChunkConstants.NODE_HITAREA_PX,
    // );
    // this.hitAreaDrawn = new Pixi.Graphics();
    // this.hitAreaDrawn.beginFill(0xffffff);
    // this.hitAreaDrawn.drawRect(
    //   - RenderedChunkConstants.NODE_HITAREA_PX / 2,
    //   - RenderedChunkConstants.NODE_HITAREA_PX / 2,
    //   RenderedChunkConstants.NODE_HITAREA_PX,
    //   RenderedChunkConstants.NODE_HITAREA_PX,
    // );
    // this.container.addChild(this.hitAreaDrawn);
    this.tooltipContainer = null;

      super.useState({}));

      super.useState({
        isActive: false
      }));

    // create a box

    // if (this.state.isActive) {
    //   this.hitAreaDrawn.tint = 0x888888;
    // } else {
    //   this.hitAreaDrawn.tint = 0xffffff;
    // }

    if (this.state.isActive) {
      if (this.tooltipContainer === null) {
        // if doesnt exist, construct it
        this.tooltipContainer = new Pixi.Container();
        const box = new Pixi.Graphics();
        box.lineStyle(2, 0xeeeeee, 1);
        box.beginFill(0x222222);
        box.drawRoundedRect(0, 0, 40, 40, 4);
        this.tooltipContainer.addChild(box)
        this.container.addChild(this.tooltipContainer);
      }
    } else {
      if (this.tooltipContainer) {
        // remove it
        this.container.removeChild(this.tooltipContainer);
        this.tooltipContainer.destroy();
        this.tooltipContainer = null;
      }
    }

    // console.log('tooltippable updated itself');

      console.log('got here in toolltippable');

    console.log('got onPointerOver in toolltippable');
    this.stateUpdaters.isActive.enqueueUpdate(() => {
      console.log('fired onPointerOver in toolltippable');
      return true;
    });

      console.log('got here in toolltippable');

    console.log('got onPointerOut in tooltippable')
    this.stateUpdaters.isActive.enqueueUpdate(() => {
      console.log('fired onPointerOut in tooltippable')
      return false;
    });

  fireStateUpdaters() { this.fireStateUpdaters(); }