/* Frame.tsx generated by @compiled/babel-plugin v0.38.1 */
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 { getIframeSandboxAttribute } from '../../../utils';
import { IFrame } from './IFrame';
import { IframeDwellTracker } from './IframeDwellTracker';
function mergeRefs(refs) {
  return value => {
    refs.forEach(ref => {
      if (typeof ref === 'function') {
        ref(value);
      } else if (ref !== null) {
        ref.current = value;
      }
    });
  };
}
const iframeStyles = null;
export const Frame = /*#__PURE__*/React.forwardRef(({
  url,
  isTrusted = false,
  testId,
  onIframeDwell,
  onIframeFocus,
  title,
  extensionKey
}, iframeRef) => {
  const [isIframeLoaded, setIframeLoaded] = useState(false);
  const [isMouseOver, setMouseOver] = useState(false);
  const [isWindowFocused, setWindowFocused] = useState(true);
  const ref = useRef();
  const mergedRef = mergeRefs([iframeRef, ref]);
  const [percentVisible, setPercentVisible] = useState(0);

  /**
   * 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
   */
  const [threshold] = useState([0.75, 0.8, 0.85, 0.9, 0.95, 1]);
  useEffect(() => {
    if (!ref || !ref.current) {
      return;
    }
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        setPercentVisible(entry === null || entry === void 0 ? void 0 : entry.intersectionRatio);
      });
    }, {
      threshold
    });
    observer.observe(ref.current);
    return () => {
      observer.disconnect();
    };
  }, [threshold, mergedRef]);
  useEffect(() => {
    const onBlur = () => {
      setWindowFocused(false);
      if (document.activeElement === ref.current) {
        onIframeFocus && onIframeFocus();
      }
    };
    const onFocus = () => {
      setWindowFocused(true);
    };
    window.addEventListener('blur', onBlur);
    window.addEventListener('focus', onFocus);
    return () => {
      window.removeEventListener('blur', onBlur);
      window.removeEventListener('focus', onFocus);
    };
  }, [ref, onIframeFocus]);
  if (!url) {
    return null;
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IframeDwellTracker, {
    isIframeLoaded: isIframeLoaded,
    isMouseOver: isMouseOver,
    isWindowFocused: isWindowFocused,
    iframePercentVisible: percentVisible,
    onIframeDwell: onIframeDwell
  }), /*#__PURE__*/React.createElement(IFrame, {
    childRef: mergedRef,
    src: url,
    "data-testid": `${testId}-frame`,
    "data-test-iframe-loaded": isIframeLoaded,
    onMouseEnter: () => {
      setMouseOver(true);
    },
    onMouseLeave: () => {
      setMouseOver(false);
    },
    allowFullScreen: true,
    scrolling: "yes",
    allow: "autoplay; encrypted-media; clipboard-write",
    onLoad: () => {
      setIframeLoaded(true);
    },
    sandbox: getIframeSandboxAttribute(isTrusted),
    title: title,
    extensionKey: extensionKey,
    className: ax(["_19itidpf _1reo15vq _18m915vq _2rkofajl _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
  }));
});
export const FrameUpdated = /*#__PURE__*/React.forwardRef(({
  url,
  isTrusted = false,
  testId,
  onIframeDwell,
  onIframeFocus,
  onIframeMouseEnter,
  onIframeMouseLeave,
  isMouseOver: isMouseOverProp,
  title,
  extensionKey
}, iframeRef) => {
  const [isIframeLoaded, setIframeLoaded] = useState(false);
  const [isMouseOver, setMouseOver] = useState(false);
  const [isWindowFocused, setWindowFocused] = useState(document.hasFocus());

  // Use prop if provided (from wrapper), otherwise use local state (for backward compatibility)
  const effectiveMouseOver = isMouseOverProp !== undefined ? isMouseOverProp : isMouseOver;
  const ref = useRef();
  const mergedRef = mergeRefs([iframeRef, ref]);
  const [percentVisible, setPercentVisible] = useState(0);

  /**
   * 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
   */
  const [threshold] = useState([0.75, 0.8, 0.85, 0.9, 0.95, 1]);
  useEffect(() => {
    if (!ref || !ref.current) {
      return;
    }
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        setPercentVisible(entry === null || entry === void 0 ? void 0 : entry.intersectionRatio);
      });
    }, {
      threshold
    });
    observer.observe(ref.current);
    return () => {
      observer.disconnect();
    };
  }, [threshold, mergedRef]);
  useEffect(() => {
    // Initialize with current focus state
    setWindowFocused(document.hasFocus());
    const onBlur = () => {
      setWindowFocused(false);
      if (document.activeElement === ref.current) {
        onIframeFocus && onIframeFocus();
      }
    };
    const onFocus = () => {
      setWindowFocused(true);
    };
    window.addEventListener('blur', onBlur);
    window.addEventListener('focus', onFocus);
    return () => {
      window.removeEventListener('blur', onBlur);
      window.removeEventListener('focus', onFocus);
    };
  }, [ref, onIframeFocus]);
  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": `${testId}-frame`,
    "data-test-iframe-loaded": isIframeLoaded,
    onMouseEnter: () => {
      onIframeMouseEnter === null || onIframeMouseEnter === void 0 ? void 0 : onIframeMouseEnter();
      // Use local state if prop not provided, otherwise prop takes precedence
      if (isMouseOverProp === undefined) {
        setMouseOver(true);
      }
    },
    onMouseLeave: () => {
      onIframeMouseLeave === null || onIframeMouseLeave === void 0 ? 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: () => {
      setIframeLoaded(true);
    },
    sandbox: getIframeSandboxAttribute(isTrusted),
    title: title,
    extensionKey: extensionKey,
    className: ax(["_19itidpf _1reo15vq _18m915vq _2rkofajl _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
  }));
});