"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LazyIntersectionObserverCard = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
var _state = require("../../../state");
var _ufoExperiences = require("../../../state/analytics/ufoExperiences");
var _useIntersectionObserver = _interopRequireDefault(require("../../../state/hooks/use-intersection-observer"));
var _useSmartLinkSeenEvent = require("../../../state/hooks/use-smart-link-seen-event");
var _shouldSample = require("../../../utils/shouldSample");
var _cardLoaderWrapper = _interopRequireDefault(require("../card-loader-wrapper"));
var _component = require("../component");
var _LoadingCardLink = require("./LoadingCardLink");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// This property enables the intersection observer to be run once the
// HTML element being observed is within `X` px of the target container it is
// being compared to. Since the default container is the `document`, we set this
// up to check once a Smart Link is within `X` px from the bottom of the viewport.
var ROOT_MARGIN_VERTICAL = '360px';
function LazyIntersectionObserverCardOld(props) {
  var ref = (0, _react.useRef)(null);
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isIntersecting = _useState2[0],
    setIsIntersecting = _useState2[1];
  var _useState3 = (0, _react.useState)((0, _shouldSample.shouldSample)()),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
    shouldSendRenderedUFOEvent = _useState4[0];
  var appearance = props.appearance,
    url = props.url,
    id = props.id;
  var prefetch = (0, _state.usePrefetch)(url);
  var Component = appearance === 'inline' ? 'span' : 'div';
  var ComponentObserver = Component;
  var onIntersection = (0, _react.useCallback)(function (entries, observer) {
    var isVisible = entries.some(function (entry) {
      return entry.isIntersecting;
    });
    if (isVisible) {
      if (shouldSendRenderedUFOEvent) {
        (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
      }
      setIsIntersecting(true);
      observer.disconnect();
    } else {
      prefetch();
    }
  }, [id, prefetch, shouldSendRenderedUFOEvent]);
  (0, _react.useEffect)(function () {
    if (!ref.current) {
      return;
    }
    var intersectionObserver = new IntersectionObserver(onIntersection, {
      rootMargin: "".concat(ROOT_MARGIN_VERTICAL, " 0px ").concat(ROOT_MARGIN_VERTICAL, " 0px")
    });
    intersectionObserver.observe(ref.current);
    return function () {
      return intersectionObserver.disconnect();
    };
  }, [ref, onIntersection]);
  var content = isIntersecting ? /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, props) : /*#__PURE__*/_react.default.createElement(ComponentObserver, {
    ref: ref
  }, /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props));

  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
  return /*#__PURE__*/_react.default.createElement(Component, {
    className: "loader-wrapper"
  }, content);
}
var LazyIntersectionObserverCardNew = function LazyIntersectionObserverCardNew(props) {
  var _useState5 = (0, _react.useState)(false),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    isIntersected = _useState6[0],
    setIsIntersected = _useState6[1];
  var _useState7 = (0, _react.useState)((0, _shouldSample.shouldSample)()),
    _useState8 = (0, _slicedToArray2.default)(_useState7, 1),
    shouldSendRenderedUFOEvent = _useState8[0];
  var appearance = props.appearance,
    children = props.children,
    id = props.id,
    onErrorCallback = props.onError,
    ui = props.ui,
    url = props.url;
  var prefetch = (0, _state.usePrefetch)(url);
  var ComponentObserver = appearance === 'inline' ? 'span' : 'div';
  var _useSmartLinkSeenEven = (0, _useSmartLinkSeenEvent.useSmartLinkSeenEvent)({
      appearance: appearance,
      children: children,
      id: id,
      ui: ui,
      url: url
    }),
    onSeenIntersecting = _useSmartLinkSeenEven.onIntersecting,
    onStatusSettled = _useSmartLinkSeenEven.onStatusSettled;
  var onError = (0, _react.useCallback)(function (data) {
    if (data !== null && data !== void 0 && data.status) {
      onStatusSettled(data.status);
    }
    onErrorCallback === null || onErrorCallback === void 0 || onErrorCallback(data);
  }, [onStatusSettled, onErrorCallback]);
  var onIntersection = (0, _react.useCallback)(function (isIntersecting) {
    if (isIntersecting) {
      if (shouldSendRenderedUFOEvent) {
        (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
      }
      onSeenIntersecting();
      setIsIntersected(true);
    } else {
      prefetch();
    }
  }, [id, onSeenIntersecting, prefetch, shouldSendRenderedUFOEvent]);
  var ref = (0, _useIntersectionObserver.default)({
    onIntersection: onIntersection
  });
  var content = isIntersected ? /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, (0, _extends2.default)({}, props, {
    onError: onError
  })) : /*#__PURE__*/_react.default.createElement(ComponentObserver, {
    ref: ref
  }, /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props));
  return /*#__PURE__*/_react.default.createElement(_cardLoaderWrapper.default, {
    appearance: appearance
  }, content);
};
var LazyIntersectionObserverCard = exports.LazyIntersectionObserverCard = (0, _platformFeatureFlagsReact.componentWithFG)('platform_sl_event_ui_seen', LazyIntersectionObserverCardNew, LazyIntersectionObserverCardOld);