import { useEffect, useState, useCallback } from 'react';
export default function useSyncedScroll() {
    const [listener, setListener] = useState(null);
    const [tableBody, setTableBody] = useState(null);
    const headerRef = useCallback((element) => {
        if (element) {
            const callback = (event) => {
                if (element && event) {
                    element.scrollTo({
                        left: event.target.scrollLeft,
                        top: 0,
                    });
                }
            };
            if (!listener) {
                setListener(() => {
                    return callback;
                });
            }
        }
    }, [listener]);
    const bodyRef = useCallback((tableBody) => {
        setTableBody(tableBody);
    }, []);
    useEffect(() => {
        if (tableBody && listener) {
            /*
            We intentionally use _outerRef prop here despite the fact that it is
            internal use only and not typed, as it is the only way for us to access to the scrollable element
            */
            //@ts-expect-error
            tableBody._outerRef.addEventListener('scroll', listener);
            return () => {
                //@ts-expect-error
                if (tableBody && tableBody._outerRef) {
                    //@ts-expect-error
                    tableBody._outerRef.removeEventListener('scroll', listener);
                }
            };
        }
    }, [tableBody, listener]);
    return { headerRef, bodyRef };
}
