document.addEventListener("DOMContentLoaded", function () {
    var ReadMore = {
        readMoreButtonClickHandler: function(event) {
            const button = event.target;
            const container = button.previousElementSibling;
            const content = container.querySelector(".read-more-content");

            if (content && content.classList.contains("read-more-content")) {
                if (content.classList.toggle("read-more-hidden")) {
                    // Add cut-off to collapse content
                    ReadMore.applyCutoffHeight(content);
                } else {
                    // Trigger datalayer event for Read More
                    onReadMoreCmpExpandDatalayer(window.location.href);

                    // Remove cut-off to expand content
                    content.style.height = "auto";

                    // Hide "Read More" button after expand. Request asked only for Read More with no toggle.
                    // TODO: Remove this line and implement "Read Less" text toggle.
                    button.style.display = "none";
                }
            }
        },
        applyCutoffHeight: function(content) {
            // Apply cutoff height based on responsive breakpoints.
            const screenWidth = window.innerWidth;

            var cutOffHeight = content.getAttribute("data-cut-off-height");
            var cutOffHeightTablet = content.getAttribute("data-cut-off-height-tablet");
            var cutOffHeightMobile = content.getAttribute("data-cut-off-height-mobile");

            if(screenWidth <= 767 && cutOffHeightMobile) {
                content.style.height = cutOffHeightMobile;
            }
            else if (screenWidth <= 1023 && cutOffHeightTablet) {
                content.style.height = cutOffHeightTablet;
            }
            else if (cutOffHeight) {
                content.style.height = cutOffHeight;
            }
            else {
                content.style.height = "200px";
            }
        },
        bindEvents: function(component) {
            const button = component.querySelector(".read-more-button");
            const container = component.querySelector(".read-more-container");
            const content = container.querySelector(".read-more-content");

            if (button) {
                button.addEventListener("click", ReadMore.readMoreButtonClickHandler);
            }

            window.addEventListener('resize', function() {
                // Only apply cutoff again if the content is currently collapsed.
                if(content.classList.contains("read-more-hidden")) {
                    ReadMore.applyCutoffHeight(content);
                }
            });
        },
        init: function (component) {
            const container = component.querySelector(".read-more-container");
            const content = container.querySelector(".read-more-content");
            
            ReadMore.applyCutoffHeight(content);
            ReadMore.bindEvents(component);
        }
    };
    const components = document.querySelectorAll(".read-more-cmp");
    components.forEach(function (component) {
        ReadMore.init(component);
    });
});