import HTMLContainer from "../HTMLContainer";
import Locator from "../../services/Locator";

export class PopupHtmlContainer extends HTMLContainer {

  constructor(parent, className = undefined) {
    super(parent, className);
    this.element.style.display = "flex";
    Locator.viewport.on("resize", this.updateTransform, this);
    Locator.viewport.on("resize", this.resize, this);

    this.resize();
    this.updateTransform();
  }

  resize() {
    // const htmlFactor = Locator.viewport.heightRatio;
    // this.scale.set(htmlFactor);
  }

  updateTransform() {
    // this.element.style.transformOrigin = `${this.anchor.x * 100}% ${this.anchor.y * 100}%`;

    const scale = Math.max(0.4, Locator.viewport.cropWidthRatio);
    let transform = `scale(${this.scale.x * scale}, ${this.scale.y * scale}) translate(-50%, -50%)`;
    this.element.style.transform = transform;
  }

  destroy() {
    super.destroy();
    Locator.viewport.on("resize", this.resize, this);
    Locator.viewport.off("resize", this.updateTransform, this);
  }
}
