import { jsx as _jsx } from "react/jsx-runtime";
import { createRef, forwardRef, useLayoutEffect, useMemo, } from "react";
import { debounce, throttle } from "lodash";
import Styles from "./StaticScroller.module.scss";
function _StaticScroller({ children, ...props }, ref) {
    const rootRef = useMemo(() => {
        return (ref || createRef());
    }, [ref]);
    useLayoutEffect(() => {
        const el = rootRef.current;
        let latestScroll;
        const child = el.children[0];
        const checkIfNeedsToHide = debounce(() => {
            const direction = el.scrollLeft > latestScroll ? "in" : "out";
            if (el.scrollLeft < child.clientWidth) {
                el.scrollTo({
                    left: direction === "in" ? child.clientWidth : 0,
                    behavior: "smooth",
                });
            }
            latestScroll = undefined;
        }, 500);
        const throtleSetLast = throttle((last) => {
            latestScroll = last;
        }, 1000 / 5, {
            leading: true,
            trailing: false,
        });
        const onScroll = () => {
            const min = Math.min(el.scrollLeft, child.clientWidth);
            const opacity = String(1 - min / child.clientWidth);
            child.style.opacity = opacity;
            checkIfNeedsToHide();
            throtleSetLast(el.scrollLeft);
        };
        el.addEventListener("scroll", onScroll, {
            passive: true,
        });
        return () => {
            el.removeEventListener("scroll", onScroll);
        };
    }, []);
    return (_jsx("div", { className: Styles.root, ...props, ref: rootRef, children: children }));
}
/**
 * A scrollable container that keeps content visible at the start.
 * As you scroll, the content smoothly fades out when it moves away.
 */
const StaticScroller = forwardRef(_StaticScroller);
export default StaticScroller;
//# sourceMappingURL=StaticScroller.js.map