import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cloneElement, useEffect, useRef, useState, } from "react";
import { isMobile } from "react-device-detect";
import PlayerExtension from "../player-extension";
const HOVER_DELAY = 350; // milliseconds
const WithCover = ({ cover, children, onReady, options, forceHover = false, ...props }) => {
    const [showPlayer, setShowPlayer] = useState(false);
    const [playerPlaying, setPlayerPlaying] = useState(false);
    const hoverTimer = useRef(null);
    const isHovering = useRef(false);
    const handleMouseEnter = () => {
        if (isMobile || !cover)
            return;
        isHovering.current = true;
        hoverTimer.current = setTimeout(() => {
            if (isHovering.current) {
                setShowPlayer(true);
            }
        }, HOVER_DELAY);
    };
    const handleMouseLeave = () => {
        if (isMobile || !cover)
            return;
        isHovering.current = false;
        if (hoverTimer.current) {
            clearTimeout(hoverTimer.current);
            hoverTimer.current = null;
        }
        setShowPlayer(false);
        setPlayerPlaying(false);
    };
    useEffect(() => {
        return () => {
            if (hoverTimer.current) {
                clearTimeout(hoverTimer.current);
            }
        };
    }, []);
    useEffect(() => {
        if (isMobile || !cover)
            return;
        if (forceHover) {
            handleMouseEnter();
        }
        else {
            handleMouseLeave();
        }
    }, [forceHover, cover]);
    return (_jsx(PlayerExtension, { className: props.className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsxs("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [cover && typeof cover !== "string" && (_jsx("div", { style: {
                        display: playerPlaying ? "none" : "block",
                        position: "absolute",
                        top: 0,
                        left: 0,
                        width: "100%",
                        height: "100%",
                    }, children: cover })), (showPlayer || !cover || typeof cover === "string") && (_jsx("div", { style: {
                        // display: playerPlaying ? "block" : "none",
                        position: "relative",
                    }, children: cloneElement(children, {
                        ...props,
                        options: {
                            ...options,
                            poster: typeof cover === "string" ? cover : options?.poster,
                        },
                        onReady: (player) => {
                            player.subscribeToPlayStart(() => {
                                setPlayerPlaying(true);
                            });
                            onReady?.(player);
                        },
                    }) }))] }) }));
};
export default WithCover;
//# sourceMappingURL=index.js.map