/*
    (c) Trove
    Purpose: JS file to support Brand Supply display injection as well as general/tag-based image badging
*/

( async function() {

    /* Retrieve the possible badge markups to apply to the various products */
    let badgeMarkupsAll = [], tagsOverride = false, badgesVertical = false;
    document.querySelectorAll(".r-badges-markup .r-badge").forEach(badge => {
        const badgeTags = badge.getAttribute("data-tags").replace(/, /g,",").trim();        
        badgeMarkupsAll.push({
            tags: badgeTags.length > 0 ? badgeTags.split(',') : [],
            brandSupply: badge.getAttribute("data-bs") === "true",
            badge
        });
        tagsOverride = tagsOverride || (badge.parentNode.hasAttribute("data-tags-override") && badge.parentNode.getAttribute("data-tags-override").trim() === "true");
        badgesVertical = badgesVertical || (badge.parentNode.hasAttribute("data-badges-vertical") && badge.parentNode.getAttribute("data-badges-vertical").trim() === "true");
    });

    /* Function to handle the positioning of badges on non-used collection grid items */
    const badgeContainersExpose = async () => {

        /* Retrieve the theme customizer settings from the Core Features block */
        const badgingConfigElem = document.querySelector(".r-core-config");
        if(badgingConfigElem) {
            try {
                const badgingConfig = JSON.parse(badgingConfigElem.textContent);
                if(badgingConfig.block_settings.selector_plp_item.length > 0 && badgingConfig.block_settings.selector_plp_badging_container.length > 0 && badgingConfig.block_settings.selector_plp_url_container.length > 0) {
                    /* Loop through grid items and add badge container to the selector specificed in settings */
                    document.querySelectorAll(badgingConfig.block_settings.selector_plp_item).forEach(gridItem => {
                        const gridItemBadgeCandidate = gridItem.querySelector(badgingConfig.block_settings.selector_plp_badging_container);
                        if(gridItemBadgeCandidate) {
                            const gridIteHandleContainer = gridItem.querySelector(badgingConfig.block_settings.selector_plp_url_container);
                            if(gridIteHandleContainer.innerHTML.indexOf("-resale") >= 0) {
                                gridItemBadgeCandidate.classList.add("r-badge-container");
                                gridItemBadgeCandidate.classList.add("r-non-used-plp");                            
                            }
                        }
                    });
                }
            } catch(e) {
                console.log("r-badge-expose-problem");
            }
        }        
    };

    /* Do we have any badges to place?  */
    if(badgeMarkupsAll.length > 0) {

        /* Pull the brand supply badge */
        const badgeMarkupsWithoutTags = badgeMarkupsAll.filter(item => !item.brandSupply && item.tags.length == 0);
        const badgeMarkupsWithTags = badgeMarkupsAll.filter(item => !item.brandSupply && item.tags.length > 0);
        const brandSupplyBadge = badgeMarkupsAll.filter(item => item.brandSupply);

        /* Prepare the markup of non-used collection items */
        await badgeContainersExpose();

        /* Go through all badge containers */
        const badgeContainersParse = () => {

            document.querySelectorAll(".r-badge-container:not(.r-badges-loaded)").forEach(container => {
                
                const isNonUsed = container.classList.contains("r-non-used-plp");

                /* Force style on container */
                if(!isNonUsed) {
                    container.style.position = "relative";
                }

                /* see if we have access to data like tags and if the product is brand supply */
                let productTags = [], productBrandSupply = false, badgesToPlace = [], badgesPlaced = 0;
                const badgeProductData = container.closest(".r-product-data");
                if(badgeProductData) {
                    const thisProductTags = badgeProductData.hasAttribute("data-tags") ? badgeProductData.getAttribute("data-tags").trim() : "";
                    productTags = thisProductTags.length > 0 ? thisProductTags.split("||") : [];
                    productBrandSupply = badgeProductData.hasAttribute("data-brand") && badgeProductData.getAttribute("data-brand").trim() === "true";
                }
                if(container.hasAttribute("data-brand")) {
                    productBrandSupply = container.getAttribute("data-brand").trim() === "true";
                }    

                /* Default Badge */
                if(badgeMarkupsWithoutTags.length > 0) {
                    badgesToPlace.push(badgeMarkupsWithoutTags[0].badge);
                    badgesPlaced++;
                }                

                /* select the brand supply badge if we have one */
                if(productBrandSupply && brandSupplyBadge.length > 0) {
                    badgesToPlace.push(brandSupplyBadge[0].badge);
                    badgesPlaced++;
                }

                /* Look for a match on tags */
                if(badgeMarkupsWithTags.length > 0 && (!productBrandSupply || tagsOverride)) {                    
                    for(let bm of badgeMarkupsWithTags.reverse()) {                        
                        const tagMatch = productTags.filter(x => bm.tags.includes(x));
                        if(tagMatch.length > 0) {
                            badgesToPlace.push(bm.badge);
                            badgesPlaced++;
                        }
                    }
                }
    
                /* Add The Badges! */
                if(badgesToPlace.length > 0) {
                    const badgesInner = document.createElement("div");
                    badgesInner.classList.add("r-badges-set");
                    badgesInner.classList.add("r-app-wrap");
                    badgesToPlace.reverse().map((badge) => {
                        badgesInner.prepend(badge.cloneNode(true));
                    });    
                    container.prepend(badgesInner);                               
                }   
                container.classList.add("r-badges-loaded");             
    
            });
            document.dispatchEvent(new CustomEvent("rec-badging-ready"));
        };
        
        /* Trigger Badge Parsing on Page Load */
        badgeContainersParse();        

        /* Trigger Badge Parsing on Proxy Load or Collection Paging */
        document.addEventListener("rec-content-ready", badgeContainersParse);
        document.addEventListener("rec-plp-paged", badgeContainersParse);
        document.addEventListener("rec-plp-chunked", badgeContainersParse);
    }

})();