import { jsx as _jsx } from "react/jsx-runtime";
import styles from "./with-lazy.module.scss";
import React, { useCallback, useEffect, useRef, useState } from "react";
import PlayerExtension from "../player-extension";
import { debounce, throttle } from "lodash";
const WithLazy = ({ lazy = false, children, onShow, ...props }) => {
    const containerRef = useRef(null);
    const [visible, setIsVisible] = useState(true);
    const show = useCallback((player) => {
        if (!visible) {
            setIsVisible(true);
            onShow && onShow(player);
        }
    }, [onShow, visible]);
    // Debounce для задержки выгрузки видео
    const debouncedHide = useCallback(debounce(() => {
        visible && setIsVisible(false);
    }, 5000), // задержка в миллисекундах
    [visible]);
    // Throttle для обработки видимости
    const handleVisibility = throttle((entry) => {
        debouncedHide.cancel();
        if (entry.isIntersecting && !visible) {
            setIsVisible(true);
            show(null);
        }
        else if (!entry.isIntersecting && visible) {
            debouncedHide();
        }
    }, 200);
    useEffect(() => {
        const container = containerRef.current;
        const observer = new IntersectionObserver(([entry]) => handleVisibility(entry), {
            threshold: 0,
        });
        if (container && lazy) {
            observer.observe(container);
        }
        return () => {
            if (container) {
                observer.unobserve(container);
            }
            handleVisibility.cancel();
        };
    }, [handleVisibility, lazy]);
    return (_jsx(PlayerExtension, { className: styles.lazyHolder, conteinerRef: containerRef, children: visible && React.cloneElement(children, { ...props, onShow }) }));
};
export default WithLazy;
//# sourceMappingURL=index.js.map