{%- if product.tags contains 'hidden' -%}
<script>
window.location.href = '/';
</script>
{%- else -%}
{%- if product.gift_card? -%}
{{ 'datepicker.material.css' | asset_url | stylesheet_tag }}
{{ 'datepicker.js' | asset_url | script_tag }}
{% endif %}
{%- render 'product-images-css' -%}
{%- render 'product-css' -%}
<div class="product-top-section d-pt-60">
    {%- render 'product-top-section-content', product: product -%}
</div>

{% comment %} This element will be move to body {% endcomment %}
{% comment %} The images content will be taken from product-images.liquid snippet by js {% endcomment %}
<div class="product-images-popup zi-7 fixed top-0 left-0 w-full h-full hide-m"></div>

{%- render 'product-form-script', product: product -%}

<script src="{{ 'popper.min.js' | asset_url }}"></script>
<script src="{{ 'tippy.min.js' | asset_url }}"></script>

<script>

function initImageTooltip() {
    const swatchesGroups = document.querySelectorAll('.product-form .color-swatch-wrapper');

    if(!tippy || !swatchesGroups) return;

    tippy('[data-tippy-content]', {
        theme: 'milano',
        followCursor: true,
        arrow: false,
        animation: false,
        placement: 'left-start',
    });

    swatchesGroups.forEach(group => {
        const swatches = group.querySelector('.product-color-swatch').querySelectorAll('.each');

        swatches.forEach(sw => {
        const tooltipContent = sw.querySelector('.product-image-tooltip'); 
            
            if (tooltipContent) { 
                tippy(sw, {
                    content: tooltipContent.innerHTML,
                    placement: 'top',
                    arrow: false,
                    allowHTML: true,
                });
            }
        })
        
       
    });
}
    
function stickyAtcAddItem(button) {
    const args = {
        qty: 1,
        variantId: document.getElementById('atc-btn').getAttribute('data-variant-id'),
        button: button
    };
    $360.addToCart(args);
}
function showStickyAtc() {
    const stickyAtc = document.querySelector('.sticky-atc');
    function handleResize() {
        // show/hide sticky atc based Waypoint
        new Waypoint({
            element: document.querySelector('.product-form'),
            handler: function(direction) {
                if(direction == 'down') {
                    stickyAtc.classList.add('active');
                } else {
                    stickyAtc.classList.remove('active');
                }
            },
            // offset: '-10%'
        });
        
        new Waypoint({
            element: document.querySelector('.product-recommendations'),
            handler: function(direction) {
                if(direction == 'down') {
                    if(stickyAtc.classList.contains('active')){
                        stickyAtc.classList.remove('active');
                    }
                } else {
                    if(!stickyAtc.classList.contains('active')){
                        stickyAtc.classList.add('active');
                    }
                }
            },
            // offset: '50%'
        });
        // END show/hide sticky atc based Waypoint
    }
    // Attach the resize event listener
    window.addEventListener("resize", handleResize);

    // Call the function initially to handle initial page load
    handleResize();
}

function initAddToWishlist(){
    function swymCallbackFn(swat){
            swat.initializeActionButtons(".product-info-title-wrapper");
    }
    if(!window.SwymCallbacks){
    window.SwymCallbacks = [];
    }
    window.SwymCallbacks.push(swymCallbackFn);
}

document.addEventListener('DOMContentLoaded', function(e) {
    initAddToWishlist();
    initImageTooltip();
    // showStickyAtc();

    // new Waypoint({
    //     element: document.querySelector('.product-images'),
    //     handler: function(direction) {
    //     },
    //     offset: '0%'
    // });
    
    // Set cookie for recently viewed products
    const recentlyViewedCookie = $360.getCookie('shopify_recently_viewed');
    let rcvVal = [];
    if(recentlyViewedCookie) {
        const rvcSplit = recentlyViewedCookie.split('=');
        const rcvParse = JSON.parse(rvcSplit[1]);
        if(rcvParse.length > 20) {
            // Limit up to 20 records
            rcvVal = rcvParse.slice(-20);
        } else {
            rcvVal = rcvParse;
        }
    }
    const productHandle = '{{ product.handle }}';
    if(!rcvVal.includes(productHandle)) {
        rcvVal.push('{{ product.handle }}');
        $360.setCookie('shopify_recently_viewed', JSON.stringify(rcvVal), 30, 'day');
    }
});

window.addEventListener('pdp:productDataUpdated', function() {   
    initImageTooltip();
    initAddToWishlist();
});
</script>

{%- endif -%}
{% schema %}
{
    "name": "Product Top Section",
    "settings": [
    ],
    "presets": [
        {
            "name": "Product Top Section"
        }
    ]
}
{% endschema %}