import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React from 'react';
import LinkGlyph from '@atlaskit/icon/core/migration/link';
import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
import { useThemeObserver } from '@atlaskit/tokens';
import { getPreviewUrlWithTheme, isProfileType } from '../../../utils';
import { ExpandedFrame } from '../components/ExpandedFrame';
import { Frame, FrameUpdated } from '../components/Frame';
import { ImageIcon } from '../components/ImageIcon';
import { useEmbedResolvePostMessageListener } from '../useEmbedResolvePostMessageListener';
var FrameComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', FrameUpdated, Frame);
var EmbedCardResolvedViewOld = /*#__PURE__*/React.forwardRef(function (_ref, embedIframeRef) {
  var link = _ref.link,
    context = _ref.context,
    onClick = _ref.onClick,
    isSelected = _ref.isSelected,
    frameStyle = _ref.frameStyle,
    preview = _ref.preview,
    title = _ref.title,
    isTrusted = _ref.isTrusted,
    _ref$testId = _ref.testId,
    testId = _ref$testId === void 0 ? 'embed-card-resolved-view' : _ref$testId,
    inheritDimensions = _ref.inheritDimensions,
    onIframeDwell = _ref.onIframeDwell,
    onIframeFocus = _ref.onIframeFocus,
    isSupportTheming = _ref.isSupportTheming,
    type = _ref.type,
    CompetitorPrompt = _ref.CompetitorPrompt,
    hideIconLoadingSkeleton = _ref.hideIconLoadingSkeleton,
    extensionKey = _ref.extensionKey;
  var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
  var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
  var text = title || (context === null || context === void 0 ? void 0 : context.text);
  var linkGlyph = React.useMemo(function () {
    return /*#__PURE__*/React.createElement(LinkGlyph, {
      label: "icon",
      LEGACY_size: "small",
      testId: "embed-card-fallback-icon",
      color: "currentColor"
    });
  }, []);
  var icon = React.useMemo(function () {
    if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
      return iconFromContext;
    }
    return /*#__PURE__*/React.createElement(ImageIcon, {
      src: src,
      default: linkGlyph,
      appearance: isProfileType(type) ? 'round' : 'square',
      hideLoadingSkeleton: hideIconLoadingSkeleton
    });
  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
  useEmbedResolvePostMessageListener({
    url: link,
    embedIframeRef: embedIframeRef
  });
  var themeState = useThemeObserver();
  var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
  if (previewUrl && isSupportTheming) {
    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
  }
  return /*#__PURE__*/React.createElement(ExpandedFrame, {
    isSelected: isSelected,
    frameStyle: frameStyle,
    href: link,
    testId: testId,
    icon: icon,
    text: text,
    onClick: onClick,
    inheritDimensions: inheritDimensions,
    setOverflow: false,
    CompetitorPrompt: CompetitorPrompt
  }, /*#__PURE__*/React.createElement(Frame, {
    url: previewUrl,
    isTrusted: isTrusted,
    testId: testId,
    ref: embedIframeRef,
    onIframeDwell: onIframeDwell,
    onIframeFocus: onIframeFocus,
    title: text,
    extensionKey: extensionKey
  }));
});
var EmbedCardResolvedViewUpdated = /*#__PURE__*/React.forwardRef(function (_ref2, embedIframeRef) {
  var link = _ref2.link,
    context = _ref2.context,
    onClick = _ref2.onClick,
    isSelected = _ref2.isSelected,
    frameStyle = _ref2.frameStyle,
    preview = _ref2.preview,
    title = _ref2.title,
    isTrusted = _ref2.isTrusted,
    _ref2$testId = _ref2.testId,
    testId = _ref2$testId === void 0 ? 'embed-card-resolved-view' : _ref2$testId,
    inheritDimensions = _ref2.inheritDimensions,
    onIframeDwell = _ref2.onIframeDwell,
    onIframeFocus = _ref2.onIframeFocus,
    onIframeMouseEnter = _ref2.onIframeMouseEnter,
    onIframeMouseLeave = _ref2.onIframeMouseLeave,
    isSupportTheming = _ref2.isSupportTheming,
    type = _ref2.type,
    CompetitorPrompt = _ref2.CompetitorPrompt,
    hideIconLoadingSkeleton = _ref2.hideIconLoadingSkeleton,
    extensionKey = _ref2.extensionKey;
  var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
  var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
  var text = title || (context === null || context === void 0 ? void 0 : context.text);
  var linkGlyph = React.useMemo(function () {
    return /*#__PURE__*/React.createElement(LinkGlyph, {
      label: "icon",
      LEGACY_size: "small",
      testId: "embed-card-fallback-icon",
      color: "currentColor"
    });
  }, []);
  var icon = React.useMemo(function () {
    if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
      return iconFromContext;
    }
    return /*#__PURE__*/React.createElement(ImageIcon, {
      src: src,
      default: linkGlyph,
      appearance: isProfileType(type) ? 'round' : 'square',
      hideLoadingSkeleton: hideIconLoadingSkeleton
    });
  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton]);
  useEmbedResolvePostMessageListener({
    url: link,
    embedIframeRef: embedIframeRef
  });
  var themeState = useThemeObserver();
  var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
  if (previewUrl && isSupportTheming) {
    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
  }
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isMouseOver = _React$useState2[0],
    setMouseOver = _React$useState2[1];
  return /*#__PURE__*/React.createElement(ExpandedFrame, {
    isSelected: isSelected,
    frameStyle: frameStyle,
    href: link,
    testId: testId,
    icon: icon,
    text: text,
    onClick: onClick,
    inheritDimensions: inheritDimensions,
    setOverflow: false,
    CompetitorPrompt: CompetitorPrompt,
    onContentMouseEnter: function onContentMouseEnter() {
      setMouseOver(true);
      onIframeMouseEnter === null || onIframeMouseEnter === void 0 || onIframeMouseEnter();
    },
    onContentMouseLeave: function onContentMouseLeave() {
      setMouseOver(false);
      onIframeMouseLeave === null || onIframeMouseLeave === void 0 || onIframeMouseLeave();
    }
  }, /*#__PURE__*/React.createElement(FrameComponent, {
    url: previewUrl,
    isTrusted: isTrusted,
    testId: testId,
    ref: embedIframeRef,
    onIframeDwell: onIframeDwell,
    onIframeFocus: onIframeFocus,
    onIframeMouseEnter: onIframeMouseEnter,
    onIframeMouseLeave: onIframeMouseLeave,
    isMouseOver: isMouseOver,
    title: text,
    extensionKey: extensionKey
  }));
});
var EmbedCardResolvedViewWithFG = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardResolvedViewUpdated, EmbedCardResolvedViewOld);
export { EmbedCardResolvedViewWithFG as EmbedCardResolvedView };