import { Container, Transform } from 'pixi.js';
import { div } from './htmlUtils.js';
import {Locator} from "@popiplay/slot-game-kit";

export class PixiHtmlContainer extends Container {
  constructor(parentDom, className, style = {}) {
    super();
    this.element = div(className);
    this.domTransform = new Transform();
    Object.assign(this.element.style, style);
    parentDom?.append(this.element);

    Locator.viewport.on('resize', this.updateTransform, this);
  }

  updateTransform() {
    super.updateTransform();
    const globalTransform = this.parent.transform.worldTransform;
    const decomposition = globalTransform.decompose(this.domTransform);
    let transform = `scale(${decomposition.scale.x}, ${decomposition.scale.y}) translate(-50%, -50%)`
    this.element.style.transform = transform;
  }

  destroy(...args) {
    Locator.viewport.off('resize', this.updateTransform, this);
    super.destroy(...args);
  }
}