export default function loadProducts(
  shadowRoot,
  products,
  theme,
  append = false
) {
  const productsList = shadowRoot.querySelector(
    ".firevert-powerwidget__products-list"
  );

  if (!append) {
    productsList.innerHTML = "";
  }

  products.forEach((product) => {
    const productElement = document.createElement("a");
    productElement.href = product.link;
    productElement.classList.add("firevert-powerwidget__product");

    productElement.style.setProperty(
      "--product-accent-color",
      theme.accentColor
    );

    const hasSalePrice = product.salePrice && product.salePrice < product.price;
    const priceElements = hasSalePrice
      ? `
        <div class="firevert-powerwidget__product-price-old">${product.price} ${product.currency}</div>
        <div class="firevert-powerwidget__product-price" style="color: ${theme.accentColor};">${product.salePrice} ${product.currency}</div>
    `
      : `
        <div class="firevert-powerwidget__product-price" style="color: ${theme.accentColor};">${product.price} ${product.currency}</div>
    `;

    const hasOmnibus = product.omnibus;
    const omnibusElement = hasOmnibus
      ? `
        <div class="firevert-powerwidget__product-omnibus">${product.omnibus}</div>
    `
      : "";

    productElement.innerHTML = `
        <div class="firevert-powerwidget__image-wrapper">
            <img src="${product.image}" alt="${product.name}">
        </div>
        <div class="firevert-powerwidget__product-info">
            <div class="firevert-powerwidget__product-name">${product.name}</div>
            ${omnibusElement}
        </div>
        <div class="firevert-powerwidget__product-price-wrapper">
            ${priceElements}
        </div>
    `;

    productsList.appendChild(productElement);
  });
}
