{% liquid
  assign section_name = 'Wishlist Products'
  assign el_id = section_name | handle | append: '-' | append: section.id

  assign section_padding = section.settings.padding
  assign padding_class = 'sp-' | append: section_padding
  if section.settings.top_half_padding
    assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
  endif
  if section.settings.bottom_half_padding
    assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
  endif
  if section.settings.bg_overlay
    assign bg_overlay = 'bg-overlay'
  endif
%}

<style>
  #{{ el_id }} {
  }
</style>


<div id="{{ el_id }}" class="{{ padding_class }} {{ bg_overlay }}">
    <div class="container product-list-parent relative">
        <div class="wishlist-products row"></div>
    </div>
    <div class="no-wishlist-product hide-m">
        <div class="max-280 mx-auto">
            <p>{{ 'wishlist.no_products' | t }}</p>
        </div>
    </div>
</div>

<script>
const wishlistProductsEl = document.querySelector('#{{ el_id }} .wishlist-products');

if(!window.SwymCallbacks){
    window.SwymCallbacks = [];
}

window.SwymCallbacks.push(function(swat){
    _swat.fetchWrtEventTypeET(function(products){
        if(products.length > 0) {
            Shopify.queue = [];
            for (var i = 0; i < products.length; i++) {
                Shopify.queue.push({
                    product_url: `${products[i].du}?view=card-wishlist&variant_id=${products[i].epi}`
                });
            }

            Shopify.moveAlong = function() {
                // If we still have requests in the queue, let's process the next one.
                if (Shopify.queue.length) {
                    const request = Shopify.queue.shift();
                    const product_url = request.product_url;

                    axios.get(product_url)
                        .then(function(response) {
                            const html = `<div class="col-6 col-d-3">${response.data}</div>`;
                            wishlistProductsEl.insertAdjacentHTML('beforeend', html);
                            Shopify.moveAlong();
                        })
                        .catch(function(error) {
                            Shopify.moveAlong();
                        });
                } else {
                    $360.lazyLoadInstance.update();
                    swat.initializeActionButtons('.wishlist-products'); // Buttons can now be initialized
                }
            };

            Shopify.moveAlong();
        } else {
            if(document.querySelector('.no-wishlist-product')) {
                document.querySelector('.no-wishlist-product').classList.remove('hide-m');
            }
            document.querySelector('.wishlist-products').classList.add('hide-m');
        }
    }, _swat.EventTypes.addToWishlist);
});
</script>

{% schema %}
  {
    "name": "Wishlist Products",
    "settings": [
      {
        "type": "header",
        "content": "Section Padding"
      },
      {
        "type": "select",
        "id": "padding",
        "label": "Padding",
        "options": [
          {
            "value": "no",
            "label": "No"
          },
          {
            "value": "sm",
            "label": "Small"
          },
          {
            "value": "md",
            "label": "Med"
          },
          {
            "value": "lg",
            "label": "Large"
          }
        ],
        "default": "md"
      },
      {
        "type": "checkbox",
        "id": "top_half_padding",
        "label": "Top half padding",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "bottom_half_padding",
        "label": "Bottom half padding",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Wishlist Products",
      }
    ]
  }
{% endschema %}