import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, } from "react";
import Text from "../Text/Text";
import Styles from "./PingPongText.module.scss";
import useMouseHover from "../../hooks/ui/useMouseHover";
const HOW_MUCH_PIXELS_TO_SCROLL_PER_SECOND = 50;
const RIGHT_TEXT_MULTIPLIER = 5;
/**
 * A component that keeps an overflow piece of text visible by continously scrolling it back and forward
 **/
/**
 * A component that displays text that scrolls back and forth when it's too long to fit.
 * The scrolling stops when you hover your mouse over the text.
 */
export default function PingPongText({ ...props }) {
    const textRef = useRef(null);
    const { uiEvents, hovering } = useMouseHover();
    useEffect(() => {
        if (!hovering) {
            let scrollingInterval;
            let scrollStartTimeout;
            scrollStartTimeout = setTimeout(() => {
                const textEl = textRef.current;
                if (!textEl)
                    return;
                const overflowWidth = textEl.scrollWidth;
                const viewWidth = textEl.clientWidth;
                const secondsPerFrame = 1000 / 60;
                const howMuchToMove = (secondsPerFrame * HOW_MUCH_PIXELS_TO_SCROLL_PER_SECOND) / 1000;
                if (overflowWidth > viewWidth) {
                    scrollingInterval = scrollText();
                    function scrollText(direction = "r") {
                        return setInterval(() => {
                            const reachedEnd = direction === "r"
                                ? textEl.scrollLeft >= overflowWidth - viewWidth
                                : textEl.scrollLeft === 0;
                            if (reachedEnd) {
                                clearInterval(scrollingInterval);
                                scrollStartTimeout = setTimeout(() => {
                                    scrollingInterval = scrollText(direction === "r" ? "l" : "r");
                                }, direction === "r" ? 2000 : 1000);
                            }
                            else {
                                if (direction === "r")
                                    textEl.scrollTo(textEl.scrollLeft + howMuchToMove, 0);
                                else {
                                    textEl.scrollTo(textEl.scrollLeft - howMuchToMove * RIGHT_TEXT_MULTIPLIER, 0);
                                }
                            }
                        }, secondsPerFrame);
                    }
                }
            }, 1000);
            return () => {
                clearTimeout(scrollStartTimeout);
                clearInterval(scrollingInterval);
            };
        }
    }, [hovering]);
    return (_jsx(Text, { ref: textRef, ...uiEvents, ...props, className: `${Styles.pingPong} ${props.className || ""}` }));
}
//# sourceMappingURL=PingPongText.js.map