function idmObserveEachOnce(elements, callback, options = {}) {
  const observer = new IntersectionObserver(
    (entries, obs) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;

        callback(entry);
        obs.unobserve(entry.target);
      });
    },
    {
      threshold: 0.1,
      ...options,
    }
  );

  elements.forEach((el) => observer.observe(el));
  return observer;
}

idmObserveEachOnce(
  document.querySelectorAll(".idm_picture__module"),
  (entry) => {
    idmPictureModuleProducts(entry.target);
  }
);

function idmGetSingleProdGraphQL(prodId) {
  const IDM_PRICE_QUERY = (priceType) => `price {
      rebateCodeActive
      price {
        ${priceType} {
          value
          formatted
        }
      }
      omnibusPrice {
        ${priceType} {
          value
          formatted
        }
      }
      omnibusPriceDetails {
        unit {
          ${priceType} {
            value
            formatted
          }
        }
        youSavePercent
        omnibusPriceIsHigherThanSellingPrice
        newPriceEffectiveUntil {
          formatted
        }
      }
      max {
        ${priceType} {
          value
          formatted
        }
      }
      unit {
        ${priceType} {
          value
          formatted
        }
      }
      unitConvertedPrice {
        ${priceType} {
          value
          formatted
        }
      }
      youSavePercent
      beforeRebate {
        ${priceType} {
          value
          formatted
        }
      }
      beforeRebateDetails {
        youSavePercent
        unit {
          ${priceType} {
            value
            formatted
          }
        }
      }
      advancePrice {
        ${priceType} {
          value
          formatted
        }
      }
      suggested {
        ${priceType} {
          value
          formatted
        }
      }
      rebateNumber {
        number
        ${priceType} {
          value
          formatted
        }
      }
    }`;

  return `
    prod${prodId}: product(productId: ${prodId}) {
        product {
            id
            name
            link
            ${IDM_PRICE_QUERY(app_shop.vars.priceType)}
        }
    }`;
}
async function idmPictureModuleProducts(containerEL) {
  try {
    const allProdEl = containerEL.querySelectorAll(".product_info[data-id]");
    const productsId = [];
    allProdEl.forEach((prodEl) => {
      if (prodEl.dataset?.id) productsId.push(prodEl.dataset?.id);
    });

    const res = await fetch("/graphql/v1/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query: `{${productsId.reduce(
          (acc, val, index) => acc + `${idmGetSingleProdGraphQL(val)}`,
          ""
        )}}`,
      }),
    });

    const data = await res.json();
    const products = Object.values(data?.data)?.map((prod) => prod.product);

    allProdEl.forEach((prodEl) => {
      const prodData = products.find((p) => p.id === +prodEl.dataset.id);
      if (!prodData) return;

      prodEl.classList.add("--mod-init");
      prodEl.innerHTML = `
        <a class="product_name" href="${prodData.link}">${prodData.name}</a>
        <span class="product_price">${
          prodData.price?.price?.[app_shop.vars.priceType]?.formatted
        }</span>
      `;
    });

    containerEL.querySelectorAll(".product_info:not(.--mod-init)");
  } catch (err) {
    console.error(err);
  }
}

document.body.addEventListener("click", (e) => {
  if (app_shop.vars.view === 3 || app_shop.vars.view === 4) return;
  const prodContainerEl = e.target.closest(".idm_picture__product");
  if (!prodContainerEl) return;
  if (prodContainerEl.classList.contains("--show"))
    return prodContainerEl.classList.remove("--show");

  const moduleContainer = prodContainerEl.closest(".idm_picture__module");
  if (!moduleContainer) return;

  moduleContainer
    .querySelectorAll(".idm_picture__product.--show")
    .forEach((prodConEl) => prodConEl.classList.remove("--show"));
  prodContainerEl.classList.add("--show");
});