async function updateCartCount() {
    try {
        const response = await fetch("/cart.js");
        const data = await response.json();
        const cartCountContainer = document.querySelector('.cart-count-bubble span');
        if (cartCountContainer) {
            cartCountContainer.innerHTML = data.item_count;
        } else {
            const cartIconBubble = document.querySelector('#cart-icon-bubble');
            if (cartIconBubble) {
                const cartBubble = document.createElement('div');
                cartBubble.className = 'cart-count-bubble';
                cartBubble.innerHTML = `<span aria-hidden="true">${data.item_count}</span><span class="visually-hidden"> items</span>`;
                cartIconBubble.appendChild(cartBubble);
            }
        }
    } catch (error) {
        console.error('Error updating cart count:', error);
    }
}

async function quizellAddToCartVariants(event) {
    const allowedOrigin = ['http://localhost:8080', 'https://app.quizell.com', 'https://demodashboard.quizell.com'];
    if (!allowedOrigin.includes(event.origin)) return;

    try {
        const receivedData = JSON.parse(event.data);
        if (!receivedData.items) return;
        let  addData = null
        if(receivedData.items.length > 1){
            const payload = receivedData.items.map((item) => {
                return {
                    quantity: 1,
                    id: item.variant_id
                };
            });
    
            addData = { 'items': payload };
        }
        else {
            addData = { 'items': receivedData.items };
        }

        console.log("Add Data Payload", addData);

        let cartResponse = {}; // Placeholder to hold the response data

        try {
            // Replace fetch with jQuery.ajax
            jQuery.ajax({
                type: 'POST',
                url: '/cart/add.js',
                data: JSON.stringify(addData),
                dataType: 'json',
                contentType: 'application/json',
                success: function (data) {
                    cartResponse = data; // Store the successful cart response
                    document.documentElement.dispatchEvent(new CustomEvent("cart:refresh", { bubbles: true }));
                    $("a[data-action='open-drawer']").get(0).click();
                },
                error: function (error) {
                    console.error("An error occurred while adding to cart:", error);
                    cartResponse.error = error.responseText; // Store error message in response
                }
            });

        } catch (error) {
            console.error("An error occurred while adding to cart:", error);
            cartResponse.error = error.message; // Store error message in response
        }

        const iframe = document.getElementById('quizellIframe');
        const quizKey = receivedData.quiz_key;
        if (iframe && iframe.contentWindow) {
            iframe.contentWindow.postMessage({ quizKey, cartResponse }, '*'); // Send the cart response or error message to the iframe
        }
    } catch (err) {
        console.error("Error parsing event data:", err);
    }
}

window.addEventListener('message', quizellAddToCartVariants, false);