import { useLayoutEffect, useRef } from 'react';

export const useMessagesViewportFit = <T extends HTMLElement>() => {
    const ref = useRef<T | null>(null);

    useLayoutEffect(() => {
        const measure = () => {
            const node = ref.current;
            if (!node) return;

            // Document overflow includes WordPress chrome below the app. Shrinking this observed
            // panel to consume it makes the next resize expand the panel again.
            const top = Math.max(Math.ceil(node.getBoundingClientRect().top + window.scrollY), 0);
            const value = `${top}px`;
            if (node.style.getPropertyValue('--ak-messages-top') !== value) {
                node.style.setProperty('--ak-messages-top', value);
            }
        };

        measure();
        window.addEventListener('resize', measure);
        const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(measure);
        if (ref.current) observer?.observe(ref.current);
        observer?.observe(document.body);

        return () => {
            window.removeEventListener('resize', measure);
            observer?.disconnect();
        };
    }, []);

    return ref;
};