class IdmSearchHotspotTab {
  constructor({ name, productsId }) {
    console.log(`IDMSEARCH HOTSPOT1 ${productsId}`);
    this.productsId = productsId;
    this.name = name;
    this.html = `
      <div class="idm-search-hotspot-tab">
      
      <label for="idm-search-hotspot-tab__search" class="idm-search-hotspot-tab__search-wrapper">
        <div class="idm-search-hotspot-tab__search-icon-wrapper">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M10.0996 16.6005C8.28294 16.6005 6.74544 15.9713 5.48711 14.713C4.22878 13.4546 3.59961 11.9171 3.59961 10.1005C3.59961 8.2838 4.22878 6.7463 5.48711 5.48796C6.74544 4.22963 8.28294 3.60046 10.0996 3.60046C11.9163 3.60046 13.4538 4.22963 14.7121 5.48796C15.9704 6.7463 16.5996 8.2838 16.5996 10.1005C16.5996 10.8338 16.4829 11.5255 16.2496 12.1755C16.0163 12.8255 15.6996 13.4005 15.2996 13.9005L19.6163 18.5838C19.7996 18.7671 19.8913 19.0005 19.8913 19.2838C19.8913 19.5671 19.7996 19.8005 19.6163 19.9838C19.4329 20.1671 19.1996 20.2588 18.9163 20.2588C18.6329 20.2588 18.3996 20.1671 18.2163 19.9838L13.8996 15.3005C13.3996 15.7005 12.8246 16.0171 12.1746 16.2505C11.5246 16.4838 10.8329 16.6005 10.0996 16.6005ZM10.0996 14.6005C11.3496 14.6005 12.4121 14.163 13.2871 13.288C14.1621 12.413 14.5996 11.3505 14.5996 10.1005C14.5996 8.85046 14.1621 7.78796 13.2871 6.91296C12.4121 6.03796 11.3496 5.60046 10.0996 5.60046C8.84961 5.60046 7.78711 6.03796 6.91211 6.91296C6.03711 7.78796 5.59961 8.85046 5.59961 10.1005C5.59961 11.3505 6.03711 12.413 6.91211 13.288C7.78711 14.163 8.84961 14.6005 10.0996 14.6005Z" fill="#111111"/>
         </svg>
        </div>

        <input id="idm-search-hotspot-tab__search" class="idm-search-hotspot-tab__search" placeholder="${LITERALS.searchPlaceholder}..." />
      </label>
      
      <div class="idm-search-hotspot-tab__content">
      </div>
    `;
  }

  // async initProducts(){
  //   const data = await idmGetClientStats();
  //   console.log(data);
  //   const allProductIds = data.lastOrders.flatMap(order => order.orderProducts.map(product => product.productId));
  //   const uniqueProductIds = [...new Set(allProductIds)];

  //   const testProductIds = [200665, 200664, 200686, 200684, 200669, 200596];
  //   this.productsId = testProductIds;

  // }

  // zapytrac Pawla o to zebvy uruchomic to asynmcrhonicznie
  initHotspot() {
    const classes = Array.from(this.container.classList).join(".");
    const tabId = this.container.dataset.tabId;
    const selector = `.${classes}[data-tab-id="${tabId}"] .idm-search-hotspot-tab__content`;
    const id = `idm-search-hotspot-tab__hotspot-${tabId}`;
    idmInsertHotspotObject({
      id,
      classes: "idm-search-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);
      },
    });
    // new IdmHotspot({
    //     id: `idm-search-hotspot-tab__hotspot-${tabId}`,
    //     classes: "idm-search-hotspot-tab__hotspot",
    //     title: "",
    //     placement: {
    //       selector,
    //       insert: "beforeend",
    //   },
    //   source: {
    //     productsId: this.productsId,
    //   },
    //   options: {
    //     swiper: false,
    //     showOpinions: true
    //   }
    //   });
  }

  initSearchInputEvents() {
    const input = this.container.querySelector(
      ".idm-search-hotspot-tab__search",
    );

    const filterProducts = () => {
      const products = this.container.querySelectorAll(".product");
      const value = input.value.toLowerCase().trim();

      products.forEach((product) => {
        const nameEl = product.querySelector(".product__name");
        if (!nameEl) return;

        const name = nameEl.textContent.toLowerCase();
        product.classList.toggle("product--hidden", !name.includes(value));
      });
    };

    const DEBOUCE_DELAY = 200;
    input.addEventListener(
      "input",
      app_shop.fn.idmDebounce(filterProducts, DEBOUCE_DELAY),
    );
  }

  initEvents() {
    this.initSearchInputEvents();
  }

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

    await this.initHotspot();
    this.initEvents();
  }
}