import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Waypoint } from 'react-waypoint';
import { AnimateContext } from "../../gravity-blocks/context/animateContext/index.js";
import { block } from "../../utils/index.js";
const b = block('AnimateBlock');
const AnimateBlock = (props) => {
    const { animated } = React.useContext(AnimateContext);
    const { children, className, offset = 100, onScroll, style, animate = animated, qa } = props;
    const [playAnimation, setPlayAnimation] = React.useState(false);
    const divClassName = animate
        ? b(null, `${playAnimation && 'animate'} ${className}`)
        : className;
    return (_jsxs("div", { className: divClassName, style: style, "data-qa": qa, children: [_jsx(Waypoint
            // trigger animation if element is above screen
            , { 
                // trigger animation if element is above screen
                topOffset: '-100000%', bottomOffset: offset, onEnter: async () => {
                    setPlayAnimation(true);
                    if (onScroll) {
                        onScroll();
                    }
                } }), children] }));
};
export default AnimateBlock;
//# sourceMappingURL=AnimateBlock.js.map
