export default class SpineController {
  constructor(containerId, config = {}) {
    this.containerId = containerId;
    this.config = {
      alpha: true,
      premultipliedAlpha: false,
      showControls: false,
      showLoading: false,
      ...config,
    };

    this.previousConfig = {};

    this.container = document.getElementById(containerId);
    this.player = undefined;
  }

  create() {
    if (!this.player) {
      const containerId = this.containerId;
      const config = this.config;
      this.player = new spine.SpinePlayer(containerId, config);
    }
  }

  dispose() {
    if (this.player) {
      const container = this.container;
      this.player.dispose();
      container.innerHTML = "";
      this.player = undefined;
    }
  }

  adjustCanvas() {
    if (this.player) {
      const container = this.container;
      const canvas = container.querySelector("canvas");
      if (canvas) {
        const rect = container.getBoundingClientRect();
        canvas.style.width = "100%";
        canvas.style.height = "100%";
        canvas.width = rect.width;
        canvas.height = rect.height;
      }
    }
  }

  changeConfig(newConfig = {}) {
    if (this.player) {
      this.previousConfig = this.config;
      this.config = {
        ...this.config,
        ...newConfig,
      };
      this.dispose();
      this.create();
    }
  }
}