/* Frame.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FrameUpdated = exports.Frame = void 0;
require("./Frame.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _reactMagneticDi = require("react-magnetic-di");
var _browserApis = require("@atlaskit/browser-apis");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _utils = require("../../../utils");
var _IFrame = require("./IFrame");
var _IframeDwellTracker = require("./IframeDwellTracker");
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); }
// eslint-disable-next-line no-unused-vars
function mergeRefs(refs) {
  return function (value) {
    refs.forEach(function (ref) {
      if (typeof ref === 'function') {
        ref(value);
      } else if (ref !== null) {
        ref.current = value;
      }
    });
  };
}
var iframeStyles = null;
var Frame = exports.Frame = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef) {
  var url = _ref.url,
    _ref$isTrusted = _ref.isTrusted,
    isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
    testId = _ref.testId,
    onIframeDwell = _ref.onIframeDwell,
    onIframeFocus = _ref.onIframeFocus,
    title = _ref.title,
    extensionKey = _ref.extensionKey;
  var doc = (0, _browserApis.getDocument)();
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isIframeLoaded = _useState2[0],
    setIframeLoaded = _useState2[1];
  var _useState3 = (0, _react.useState)(false),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    isMouseOver = _useState4[0],
    setMouseOver = _useState4[1];
  var _useState5 = (0, _react.useState)(true),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    isWindowFocused = _useState6[0],
    setWindowFocused = _useState6[1];
  var ref = (0, _react.useRef)();
  var mergedRef = mergeRefs([iframeRef, ref]);
  var _useState7 = (0, _react.useState)(0),
    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
    percentVisible = _useState8[0],
    setPercentVisible = _useState8[1];

  /**
   * These are the 'percent visible' thresholds at which the intersectionObserver will
   * trigger a state change. Eg. when the user scrolls and moves from 74% to 76%, or
   * vice versa. It's in a state object so that its static for the useEffect
   */
  var _useState9 = (0, _react.useState)([0.75, 0.8, 0.85, 0.9, 0.95, 1]),
    _useState0 = (0, _slicedToArray2.default)(_useState9, 1),
    threshold = _useState0[0];
  (0, _react.useEffect)(function () {
    if (!ref || !ref.current) {
      return;
    }
    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        setPercentVisible(entry === null || entry === void 0 ? void 0 : entry.intersectionRatio);
      });
    }, {
      threshold: threshold
    });
    observer.observe(ref.current);
    return function () {
      observer.disconnect();
    };
  }, [threshold, mergedRef]);
  (0, _react.useEffect)(function () {
    var onBlur = function onBlur() {
      setWindowFocused(false);
      if ((0, _platformFeatureFlags.fg)('jpx-1074-smart-links-iframe')) {
        if ((doc === null || doc === void 0 ? void 0 : doc.activeElement) === ref.current) {
          onIframeFocus && onIframeFocus();
        }
      } else {
        // The below will be removed as part of FG cleanup
        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
        if (document.activeElement === ref.current) {
          onIframeFocus && onIframeFocus();
        }
      }
    };
    var onFocus = function onFocus() {
      setWindowFocused(true);
    };
    window.addEventListener('blur', onBlur);
    window.addEventListener('focus', onFocus);
    return function () {
      window.removeEventListener('blur', onBlur);
      window.removeEventListener('focus', onFocus);
    };
  }, [ref, onIframeFocus, doc]);
  if (!url) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_IframeDwellTracker.IframeDwellTracker, {
    isIframeLoaded: isIframeLoaded,
    isMouseOver: isMouseOver,
    isWindowFocused: isWindowFocused,
    iframePercentVisible: percentVisible,
    onIframeDwell: onIframeDwell
  }), /*#__PURE__*/_react.default.createElement(_IFrame.IFrame, {
    childRef: mergedRef,
    src: url,
    "data-testid": "".concat(testId, "-frame"),
    "data-test-iframe-loaded": isIframeLoaded,
    onMouseEnter: function onMouseEnter() {
      setMouseOver(true);
    },
    onMouseLeave: function onMouseLeave() {
      setMouseOver(false);
    },
    allowFullScreen: true,
    scrolling: "yes",
    allow: "autoplay; encrypted-media; clipboard-write",
    onLoad: function onLoad() {
      setIframeLoaded(true);
    },
    sandbox: (0, _utils.getIframeSandboxAttribute)(isTrusted),
    title: title,
    extensionKey: extensionKey,
    className: (0, _runtime.ax)(["_19itidpf _1reo15vq _18m915vq _2rkofajl _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
  }));
});
var FrameUpdated = exports.FrameUpdated = /*#__PURE__*/_react.default.forwardRef(function (_ref2, iframeRef) {
  var _doc$hasFocus;
  var url = _ref2.url,
    _ref2$isTrusted = _ref2.isTrusted,
    isTrusted = _ref2$isTrusted === void 0 ? false : _ref2$isTrusted,
    testId = _ref2.testId,
    onIframeDwell = _ref2.onIframeDwell,
    onIframeFocus = _ref2.onIframeFocus,
    onIframeMouseEnter = _ref2.onIframeMouseEnter,
    onIframeMouseLeave = _ref2.onIframeMouseLeave,
    isMouseOverProp = _ref2.isMouseOver,
    title = _ref2.title,
    extensionKey = _ref2.extensionKey;
  var doc = (0, _browserApis.getDocument)();
  var _useState1 = (0, _react.useState)(false),
    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
    isIframeLoaded = _useState10[0],
    setIframeLoaded = _useState10[1];
  var _useState11 = (0, _react.useState)(false),
    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
    isMouseOver = _useState12[0],
    setMouseOver = _useState12[1];
  // Accessing the document here for SSR where document.hasFocus may be absent breaks SSR
  // when we're trying to load things like Loom frames in SSR
  // We _could_ either throw a guard in here (i.e check for the existence of document)
  // _or_
  // we can default to false, and set this state once the frame ref is available in a useEffect (safer IMO)
  // which already seems to be existing behavior in a useEffect below.
  var _useState13 = (0, _react.useState)(
    // The below will be removed as part of FG cleanup
    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
    (0, _platformFeatureFlags.fg)('jpx-1074-smart-links-iframe') ? (_doc$hasFocus = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus !== void 0 ? _doc$hasFocus : false : document.hasFocus()),
    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
    isWindowFocused = _useState14[0],
    setWindowFocused = _useState14[1];

  // Use prop if provided (from wrapper), otherwise use local state (for backward compatibility)
  var effectiveMouseOver = isMouseOverProp !== undefined ? isMouseOverProp : isMouseOver;
  var ref = (0, _react.useRef)();
  var mergedRef = mergeRefs([iframeRef, ref]);
  var _useState15 = (0, _react.useState)(0),
    _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
    percentVisible = _useState16[0],
    setPercentVisible = _useState16[1];

  /**
   * These are the 'percent visible' thresholds at which the intersectionObserver will
   * trigger a state change. Eg. when the user scrolls and moves from 74% to 76%, or
   * vice versa. It's in a state object so that its static for the useEffect
   */
  var _useState17 = (0, _react.useState)([0.75, 0.8, 0.85, 0.9, 0.95, 1]),
    _useState18 = (0, _slicedToArray2.default)(_useState17, 1),
    threshold = _useState18[0];
  (0, _react.useEffect)(function () {
    if (!ref || !ref.current) {
      return;
    }
    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        setPercentVisible(entry === null || entry === void 0 ? void 0 : entry.intersectionRatio);
      });
    }, {
      threshold: threshold
    });
    observer.observe(ref.current);
    return function () {
      observer.disconnect();
    };
  }, [threshold, mergedRef]);
  (0, _react.useEffect)(function () {
    var _doc$hasFocus2;
    // Initialize with current focus state
    // The below will be removed as part of FG cleanup
    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
    setWindowFocused((0, _platformFeatureFlags.fg)('jpx-1074-smart-links-iframe') ? (_doc$hasFocus2 = doc === null || doc === void 0 ? void 0 : doc.hasFocus()) !== null && _doc$hasFocus2 !== void 0 ? _doc$hasFocus2 : false : document.hasFocus());
    var onBlur = function onBlur() {
      setWindowFocused(false);
      if ((0, _platformFeatureFlags.fg)('jpx-1074-smart-links-iframe')) {
        if ((doc === null || doc === void 0 ? void 0 : doc.activeElement) === ref.current) {
          onIframeFocus && onIframeFocus();
        }
      } else {
        // The below will be removed as part of FG cleanup
        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
        if (document.activeElement === ref.current) {
          onIframeFocus && onIframeFocus();
        }
      }
    };
    var onFocus = function onFocus() {
      setWindowFocused(true);
    };
    window.addEventListener('blur', onBlur);
    window.addEventListener('focus', onFocus);
    return function () {
      window.removeEventListener('blur', onBlur);
      window.removeEventListener('focus', onFocus);
    };
  }, [ref, onIframeFocus, doc]);
  if (!url) {
    return null;
  }
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_IframeDwellTracker.IframeDwellTracker, {
    isIframeLoaded: isIframeLoaded,
    isMouseOver: effectiveMouseOver,
    isWindowFocused: isWindowFocused,
    iframePercentVisible: percentVisible,
    onIframeDwell: onIframeDwell
  }), /*#__PURE__*/_react.default.createElement(_IFrame.IFrame, {
    childRef: mergedRef,
    src: url,
    "data-testid": "".concat(testId, "-frame"),
    "data-test-iframe-loaded": isIframeLoaded,
    onMouseEnter: function onMouseEnter() {
      onIframeMouseEnter === null || onIframeMouseEnter === void 0 || onIframeMouseEnter();
      // Use local state if prop not provided, otherwise prop takes precedence
      if (isMouseOverProp === undefined) {
        setMouseOver(true);
      }
    },
    onMouseLeave: function onMouseLeave() {
      onIframeMouseLeave === null || onIframeMouseLeave === void 0 || onIframeMouseLeave();
      // Use local state if prop not provided, otherwise prop takes precedence
      if (isMouseOverProp === undefined) {
        setMouseOver(false);
      }
    },
    allowFullScreen: true,
    scrolling: "yes",
    allow: "autoplay; encrypted-media; clipboard-write",
    onLoad: function onLoad() {
      setIframeLoaded(true);
    },
    sandbox: (0, _utils.getIframeSandboxAttribute)(isTrusted),
    title: title,
    extensionKey: extensionKey,
    className: (0, _runtime.ax)(["_19itidpf _1reo15vq _18m915vq _2rkofajl _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
  }));
});