/**
 * Audace — Scroll-jack long text inside a pinned `.is-style-slide`.
 * On wheel, find the slide currently pinned at the top and, if one of
 * its columns overflows, translate that column instead of scrolling.
 */
(function () {
    'use strict';

    var colsToTranslate = [];

    function refresh() {
        colsToTranslate = [];
        if (window.innerWidth < 782) return;

        const cols = document.querySelectorAll('.is-style-slide > .wp-block-column');

        // Compute max height
        const adminBar = document.getElementById('wpadminbar');
        const header = document.querySelector('.wp-block-template-part.site-header, header.wp-block-template-part, #masthead');
        const adminBarH = adminBar ? adminBar.getBoundingClientRect().height : 0;
        const headerH = header ? header.getBoundingClientRect().height : 0;
        const topH = adminBarH + headerH;
        const maxH = window.innerHeight - topH;

        for (let i = 0; i < cols.length; i++) {
            const col = cols[i];
            if (col.scrollHeight > maxH) {
                // Cache absolute document top of the slide now, while nothing is pinned-mid-scroll.
                const slide = col.closest('.is-style-slide');
                col.dataset.audaceSlideTop = slide.getBoundingClientRect().top + window.scrollY;
                colsToTranslate.push(col);
            }
        }
    }

    function topOffset() {
        const adminBar = document.getElementById('wpadminbar');
        const header = document.querySelector('.wp-block-template-part.site-header, header.wp-block-template-part, #masthead');
        return (adminBar ? adminBar.getBoundingClientRect().height : 0)
             + (header ? header.getBoundingClientRect().height : 0);
    }

    function onWheel(e) {
        if (window.innerWidth < 782 || !colsToTranslate.length) return;
        const topH = topOffset();
        const maxH = window.innerHeight - topH;

        for (let i = 0; i < colsToTranslate.length; i++) {
            // col: the overflowing WP column element we're translating.
            const col = colsToTranslate[i];

            // overflow: how many pixels of this column extend beyond the
            // available viewport (maxH). The translation range is [0, overflow].
            const overflow = col.scrollHeight - maxH;
            if (overflow <= 0) continue;

            // slideTop: absolute document Y of the slide's natural top,
            // cached in refresh() via rect.top + scrollY at page load so it
            // is NOT affected by sticky positioning during scroll.
            const slideTop = parseFloat(col.dataset.audaceSlideTop) || 0;


            console.log(slideTop, window.scrollY);


            col.style.transform = 'translate3d(0,' + (-slideTop) + 'px,0)';
        }
    }

    window.addEventListener('scroll', onWheel);
    window.addEventListener('load', refresh);
    window.addEventListener('resize', refresh);
    window.addEventListener('scroll', refresh);
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', refresh);
    } else {
        refresh();
    }
})();
