/**
 * Chrome Tint
 * -
 * Tint the browser chrome (status bar + home indicator area) to match
 * the site header / footer when those elements are in view.
 *
 *   - top of screen (status bar / notch / Dynamic Island):
 *     controlled by the <meta name="theme-color"> tag. iOS Safari
 *     picks up runtime updates.
 *
 *   - bottom of screen (home indicator area, behind the address bar):
 *     a fixed pseudo-element filled with `env(safe-area-inset-bottom)`
 *     takes its background from a body class that this module toggles
 *     when the footer is in view.
 *
 * The header color (#032F46) is the darker end of the .site-header
 * gradient. The footer color (#102C45) is the sRGB equivalent of
 * the `--color-cwc-blue-02` token used by .site-footer. If those
 * colors change in source, update HEADER_COLOR / FOOTER_COLOR below.
 *
 *   - "In view" = any pixel of the element overlaps the viewport.
 *
 * No-ops if either the header or footer is missing, or if
 * IntersectionObserver isn't supported (older browsers).
 */

const HEADER_COLOR = '#032F46';
const FOOTER_COLOR = '#102C45';
const THEME_META_NAME = 'theme-color';
const FOOTER_IN_VIEW_CLASS = 'footer-in-view';

function ensureThemeColorMeta() {
    let meta = document.head.querySelector(`meta[name="${THEME_META_NAME}"]`);
    if (!meta) {
        meta = document.createElement('meta');
        meta.setAttribute('name', THEME_META_NAME);
        document.head.appendChild(meta);
    }
    return meta;
}

function setTopTint(color) {
    const meta = ensureThemeColorMeta();
    if (color == null) {
        // Clear: iOS Safari falls back to the page background.
        meta.removeAttribute('content');
    } else {
        meta.setAttribute('content', color);
    }
}

function setBottomTint(active) {
    document.body.classList.toggle(FOOTER_IN_VIEW_CLASS, active);
}

function initChromeTint() {
    if (typeof IntersectionObserver === 'undefined') return;

    const header = document.querySelector('.site-header');
    const footer = document.querySelector('.site-footer');
    if (!header && !footer) return;

    // Top tint state. Truthy means the header is currently in view.
    let headerInView = false;
    // Bottom tint state. Truthy means the footer is currently in view.
    let footerInView = false;

    const apply = () => {
        // Top tint is the header color ONLY when the header is in view.
        // When only the footer is in view, the top tint is cleared (the
        // user only asked for header-color at the top).
        if (headerInView) {
            setTopTint(HEADER_COLOR);
        } else {
            setTopTint(null);
        }
        // Bottom tint is the footer color ONLY when the footer is in view.
        setBottomTint(footerInView);
    };

    const buildObserver = (el, onChange) => {
        const io = new IntersectionObserver(
            (entries) => {
                for (const entry of entries) {
                    onChange(entry.isIntersecting);
                }
                apply();
            },
            // Zero threshold + no rootMargin = "any pixel in view".
            { threshold: 0, rootMargin: '0px' },
        );
        io.observe(el);
        return io;
    };

    if (header) buildObserver(header, (v) => { headerInView = v; });
    if (footer) buildObserver(footer, (v) => { footerInView = v; });
}

export default initChromeTint;