document.addEventListener('DOMContentLoaded', function () {
    // Get references to the DOM elements
    const header = document.getElementById('lcp-header-container');
    const sideContent = document.getElementById('lcp-sidecontent');
    
    // Ensure elements exist before proceeding
    if (!header || !sideContent) return;
    
    // Check if the header has the 'lcp-sticky' and 'lcp-sticky-on-scroll' class
    const headerIsSticky = header.classList.contains('lcp-sticky');
    const headerIsStickyOnScroll = header.classList.contains('lcp-sticky-on-scroll');
    
    // Measure the height of the header once the DOM is loaded
    const headerHeight = header.offsetHeight;
    let fullHeaderHeight;
    
    // If the admin-bar is present, the fullHeaderHeight is the headerHeight + 32px
    if (document.body.classList.contains('admin-bar')) {
        const adminBarHeight = document.getElementById('wpadminbar').offsetHeight;
        fullHeaderHeight = headerHeight + adminBarHeight;
    } else {
        fullHeaderHeight = headerHeight;
    }

    // Set the initial height of #lcp-sidecontent based on whether the header is sticky or not
    if (headerIsSticky) {
        sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
    } else {
        sideContent.style.height = `100vh`;
    }

    // Function to handle the scroll event
    function handleScroll() {
        console.log ("hey");
        const scrolled = window.scrollY || document.documentElement.scrollTop;

        // Check if the page has scrolled past the height of the header
        if (scrolled >= headerHeight) {
            // Add the 'lcp-fixed' class and set 'top' to 0 for side content
            sideContent.classList.add('lcp-fixed');
            sideContent.style.top = '0';

            // If the header has 'lcp-sticky-on-scroll', adjust height of side content to be 100vh - fullHeaderHeight
            if (headerIsStickyOnScroll) {
                sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
                // Add 'lcp-fixed' to the header
                header.classList.add('lcp-fixed');
                // Set the 'top' of the sideContent to the height of the header
                sideContent.style.top = `${fullHeaderHeight}px`;
            } else if (headerIsSticky) {
                // If the header is sticky but not 'sticky-on-scroll', keep the side content height adjusted
                sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)`;
            } else {
                // Set side content height to 100vh when not sticky
                
                sideContent.style.height = 'calc(100vh - 32px)';
                sideContent.style.top = '32px';
                
            }
        } else {
            // Remove the 'lcp-fixed' class from side content and header if scrolled back above the header
            sideContent.classList.remove('lcp-fixed');
            sideContent.style.top = ''; // Reset the 'top' style

            // Reset height to 100vh when not fixed
            sideContent.style.height = `calc(100vh - ${fullHeaderHeight}px)` ;

            // If header has the 'lcp-sticky-on-scroll' class, remove 'lcp-fixed' from the header
            if (headerIsStickyOnScroll) {
                header.classList.remove('lcp-fixed');
            }
        }
    }



    // Also trigger the scroll handler once on load in case the page is already scrolled
    handleScroll();

    function debounce(func, delay) {
        let timeout;
        return function() {
            const context = this;
            const args = arguments;
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                func.apply(context, args);
            }, delay);
        };
    }
    
// Add debounced scroll event listener
window.addEventListener('scroll', debounce(handleScroll, 20)); // 200ms debounce

});









const sidecontent = document.getElementById("lcp-sidecontent");
const innerContent = document.getElementById("lcp-sidecontent-inner");
const scrollTrack = document.getElementById("lcp-scroll-track");
const scrollBar = document.getElementById("lcp-scroll-bar");

let isDragging = false;
let startY = 0;
let startScrollTop = 0;

// Update the custom scrollbar position based on the content's scroll position
function updateCustomScrollbar() {
    const contentHeight = innerContent.scrollHeight;
    const visibleHeight = innerContent.clientHeight;
    const scrollTrackHeight = scrollTrack.clientHeight;
    
    // Calculate the proportion of visible content to total content
    const thumbHeight = (visibleHeight / contentHeight) * scrollTrackHeight;
    scrollBar.style.height = `${thumbHeight}px`;
    
    // Calculate the scroll ratio (position of the content relative to its height)
    const scrollRatio = innerContent.scrollTop / (contentHeight - visibleHeight);
    
    // Position the scrollbar thumb based on the scroll ratio
    scrollBar.style.top = `${scrollRatio * (scrollTrackHeight - thumbHeight)}px`;
}

// Handle the mouse down event to begin dragging the scrollbar
scrollBar.addEventListener("mousedown", (e) => {
    isDragging = true;
    startY = e.clientY;
    startScrollTop = innerContent.scrollTop;
    document.body.style.userSelect = "none"; // Disable text selection while dragging
});

// Handle mouse movement to drag the scrollbar and simulate scrolling
document.addEventListener("mousemove", (e) => {
    if (!isDragging) return;
    
    const deltaY = e.clientY - startY;
    const contentHeight = innerContent.scrollHeight;
    const visibleHeight = innerContent.clientHeight;
    const scrollTrackHeight = scrollTrack.clientHeight;
    
    const thumbHeight = scrollBar.clientHeight;
    const scrollableDistance = contentHeight - visibleHeight;
    const thumbDistance = scrollTrackHeight - thumbHeight;
    
    // Calculate new scroll position for content based on dragging
    const newScrollTop = (deltaY / thumbDistance) * scrollableDistance + startScrollTop;
    innerContent.scrollTop = newScrollTop;
    updateCustomScrollbar();
});

// Handle mouse up event to stop dragging
document.addEventListener("mouseup", () => {
    isDragging = false;
    document.body.style.userSelect = ""; // Enable text selection again
});

// Handle scroll events on the content to update the custom scrollbar
innerContent.addEventListener("scroll", updateCustomScrollbar);

// Initialize the custom scrollbar position when the page loads
updateCustomScrollbar();