"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const react_waypoint_1 = require("react-waypoint");
const animateContext_1 = require("../../gravity-blocks/context/animateContext/index.js");
const utils_1 = require("../../utils/index.js");
const b = (0, utils_1.block)('AnimateBlock');
const AnimateBlock = (props) => {
    const { animated } = React.useContext(animateContext_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: divClassName, style: style, "data-qa": qa, children: [(0, jsx_runtime_1.jsx)(react_waypoint_1.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] }));
};
exports.default = AnimateBlock;
//# sourceMappingURL=AnimateBlock.js.map
