import { InteractionData } from "pixi.js";
export class DraggableHelper {
  private sourceContainer!: PIXI.Container
  private targetContainer!: PIXI.Container
  private targetStartingX!: number;
  private targetStartingY!: number;
  private mouseStartingX!: number;
  private mouseStartingY!: number;
  private data!: InteractionData // TODO(bowei): what is this
  private isDragging: boolean = false;
  // private dragRatio: number = 1;
  constructor(args: {
    source: PIXI.Container,
    target: PIXI.Container,
  }) {
    let { source, target } = args;
    source.interactive = true;
    // this.dragRatio = ratio;
    this.sourceContainer = source;
    this.targetContainer = target;
    source.addListener('pointerdown', this.onDragStart);
    source.addListener('pointerup', this.onDragEnd);
    source.addListener('pointerupoutside', this.onDragEnd);
    source.addListener('pointermove', this.onDragMove);
  }
  private onDragStart = (event: PIXI.InteractionEvent) => {
    this.data = event.data;
    this.targetStartingX = this.targetContainer.x;
    this.targetStartingY = this.targetContainer.y;
    const startingPosition = this.data.getLocalPosition(this.sourceContainer)
    this.mouseStartingX = startingPosition.x;
    this.mouseStartingY = startingPosition.y;
    console.log(this);
    this.isDragging = true;
  }
  private onDragEnd = () => {
    this.isDragging = false;
  }
  private onDragMove = () => {
    if (this.isDragging) {
      // wtf??
      const localPosition = this.data.getLocalPosition(this.sourceContainer);
      this.targetContainer.x = this.targetStartingX + (localPosition.x - this.mouseStartingX);
      this.targetContainer.y = this.targetStartingY + (localPosition.y - this.mouseStartingY);
    }
  }
}
export function registerDraggable(args: {
    source: PIXI.Container,
    target: PIXI.Container,
    ratio?: number
}) : DraggableHelper {
  return new DraggableHelper(args);
}

import { DraggableHelper, registerDraggable } from "../lib/pixi/DraggableHelper";

    registerDraggable({
      source: this.backdropStage,
      // dragging backdrop stage should move action stage in the reverse direction -- we're dragging the backdrop, not an entity
      target: this.actionStage,
    });

    const clickableHud = new Pixi.Graphics();
    this.backdropStage.addChild(clickableHud);
    clickableHud.beginFill(0xabcdef, 1);
    // clickableHud.alpha = 0.5;
    clickableHud.interactive = true;
    // clickableHud.interactiveChildren = true;
    // clickableHud.zIndex = 31;
    // clickableHud.buttonMode = true;
    // clickableHud.drawRect(0, 0, this.config.canvasWidth, this.config.canvasHeight);
    clickableHud.drawRect(-10000, -10000, 20000, 20000);
    clickableHud.addListener('pointerupoutside', e => {
      console.log('clickable hud', e)
    })
    clickableHud.addListener('pointerup', (e) => {
      window.alert('up from clickable hud');
      console.log('clickable hud', e)
    })

    const backdrop = new Pixi.Graphics();
    this.backdropStage.addChild(backdrop);
    backdrop.beginFill(0xabcdef, 1);
    // backdrop.alpha = 0.5;
    backdrop.interactive = true;
    // backdrop.interactiveChildren = true;
    // backdrop.zIndex = 31;
    // backdrop.buttonMode = true;
    // backdrop.drawRect(0, 0, this.config.canvasWidth, this.config.canvasHeight);
    backdrop.drawRect(-10000, -10000, 20000, 20000);
    // backdrop.addListener('pointerupoutside', e => {
    //   console.log('clickable hud', e)
    // })
    // backdrop.addListener('pointerup', (e) => {
    //   // window.alert('up from clickable hud');
    //   console.log('clickable hud', e)
    // })