class IdmHotspotTab {
  constructor({ name, productsId }) {
    this.productsId = productsId;
    this.name = name;
    this.html = `
      <div class="idm-hotspot-tab">
        <div class="idm-hotspot-tab__content">
      </div>
    `;
  }

  initHotspot() {
    const classes = Array.from(this.container.classList).join(".");
    const tabId = this.container.dataset.tabId;
    const selector = `.${classes}[data-tab-id="${tabId}"] .idm-hotspot-tab__content`;
    const id = `idm-hotspot-tab__hotspot-${tabId}`;
    // deprecated. use new version
    idmInsertHotspotObject({
      id,
      classes: "idm-hotspot-tab__hotspot",
      title: "",
      placement: {
        selector,
        insert: "beforeend",
      },
      query: {
        string: `
        searchInput: {productsId : [${this.productsId}]}
        settingsInput: { limit: 100, page: 0 }
      `,
        graphFn: IDM_PRODUCTS_GQL,
      },
      options: {
        swiper: false,
      },
      onLoad: () => {
        setTimeout(() => {
          app_shop.fn.idmSetHeight({
            selectors: [
              `#${id} .product__name`,
              `#${id} .product__price`,
              `#${id} .btn-idm`,
              `#${id} .product__price-omnibus`,
            ],
            container: `#${id} .products`,
          });
        }, 50);
      },
    });
  }

  async onInit(tab, modalInstance) {
    this.container = tab;
    if (this.productsId.length === 0) {
      console.error("IdmHotspotTab: no products");
      return;
    }

    await this.initHotspot();
  }
}