"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResultCardCallout = void 0;
const react_1 = __importDefault(require("react"));
const react_intersection_observer_1 = require("react-intersection-observer");
const hooks_1 = require("../../hooks");
const __1 = require("..");
const ResultCardCallout = (props) => {
    var _a;
    const { track } = (0, hooks_1.useAnalytics)();
    const { ref, inView } = (0, react_intersection_observer_1.useInView)({
        threshold: 0.5,
        triggerOnce: true,
    });
    const handleClick = react_1.default.useCallback(() => {
        track({
            eventName: "clickPromotion",
            payload: {
                link: props.callout.link,
                title: props.callout.title,
            },
        });
    }, [track, props.callout]);
    const handleView = react_1.default.useCallback(() => {
        track({
            eventName: "viewPromotion",
            payload: {
                link: props.callout.link,
                title: props.callout.title,
            },
        });
    }, [track, props.callout]);
    react_1.default.useEffect(() => {
        var _a;
        if (inView) {
            (_a = props.onView) === null || _a === void 0 ? void 0 : _a.call(props);
            handleView();
        }
    }, [inView]);
    const RenderComponent = (_a = props.render) !== null && _a !== void 0 ? _a : __1.ExampleResultCardCallout;
    return react_1.default.createElement(RenderComponent, Object.assign({}, props, { itemRef: ref, handleClick: handleClick }));
};
exports.ResultCardCallout = ResultCardCallout;
//# sourceMappingURL=ResultCardCallout.js.map