/* Frame.tsx generated by @compiled/babel-plugin v0.39.1 */
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./Frame.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useEffect, useRef, useState } from 'react';

// eslint-disable-next-line no-unused-vars

import { di } from 'react-magnetic-di';
import { getDocument } from '@atlaskit/browser-apis';
import { fg } from '@atlaskit/platform-feature-flags';
import { getIframeSandboxAttribute } from '../../../utils';
import { IFrame } from './IFrame';
import { IframeDwellTracker } from './IframeDwellTracker';
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;
export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
  var _doc$hasFocus;
  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,
    onIframeMouseEnter = _ref.onIframeMouseEnter,
    onIframeMouseLeave = _ref.onIframeMouseLeave,
    isMouseOverProp = _ref.isMouseOver,
    title = _ref.title,
    extensionKey = _ref.extensionKey;
  var doc = getDocument();
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isIframeLoaded = _useState2[0],
    setIframeLoaded = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isMouseOver = _useState4[0],
    setMouseOver = _useState4[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 _useState5 = useState(
    // The below will be removed as part of FG cleanup
    // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
    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()),
    _useState6 = _slicedToArray(_useState5, 2),
    isWindowFocused = _useState6[0],
    setWindowFocused = _useState6[1];

  // Use prop if provided (from wrapper), otherwise use local state (for backward compatibility)
  var effectiveMouseOver = isMouseOverProp !== undefined ? isMouseOverProp : isMouseOver;
  var ref = useRef();
  var mergedRef = mergeRefs([iframeRef, ref]);
  var _useState7 = useState(0),
    _useState8 = _slicedToArray(_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 = useState([0.75, 0.8, 0.85, 0.9, 0.95, 1]),
    _useState0 = _slicedToArray(_useState9, 1),
    threshold = _useState0[0];
  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]);
  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(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 (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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IframeDwellTracker, {
    isIframeLoaded: isIframeLoaded,
    isMouseOver: effectiveMouseOver,
    isWindowFocused: isWindowFocused,
    iframePercentVisible: percentVisible,
    onIframeDwell: onIframeDwell
  }), /*#__PURE__*/React.createElement(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: getIframeSandboxAttribute(isTrusted),
    title: title,
    extensionKey: extensionKey,
    className: ax(["_19itidpf _1reo15vq _18m915vq _2rkofajl _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
  }));
});