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';
const FrameComponent = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', FrameUpdated, Frame);
const EmbedCardResolvedViewOld = /*#__PURE__*/React.forwardRef(({
  link,
  context,
  onClick,
  isSelected,
  frameStyle,
  preview,
  title,
  isTrusted,
  testId = 'embed-card-resolved-view',
  inheritDimensions,
  onIframeDwell,
  onIframeFocus,
  isSupportTheming,
  type,
  CompetitorPrompt,
  hideIconLoadingSkeleton,
  extensionKey
}, embedIframeRef) => {
  const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
  const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
  const text = title || (context === null || context === void 0 ? void 0 : context.text);
  const linkGlyph = React.useMemo(() => /*#__PURE__*/React.createElement(LinkGlyph, {
    label: "icon",
    LEGACY_size: "small",
    testId: "embed-card-fallback-icon",
    color: "currentColor"
  }), []);
  let icon = React.useMemo(() => {
    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
  });
  const themeState = useThemeObserver();
  let 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
  }));
});
const EmbedCardResolvedViewUpdated = /*#__PURE__*/React.forwardRef(({
  link,
  context,
  onClick,
  isSelected,
  frameStyle,
  preview,
  title,
  isTrusted,
  testId = 'embed-card-resolved-view',
  inheritDimensions,
  onIframeDwell,
  onIframeFocus,
  onIframeMouseEnter,
  onIframeMouseLeave,
  isSupportTheming,
  type,
  CompetitorPrompt,
  hideIconLoadingSkeleton,
  extensionKey
}, embedIframeRef) => {
  const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
  const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
  const text = title || (context === null || context === void 0 ? void 0 : context.text);
  const linkGlyph = React.useMemo(() => /*#__PURE__*/React.createElement(LinkGlyph, {
    label: "icon",
    LEGACY_size: "small",
    testId: "embed-card-fallback-icon",
    color: "currentColor"
  }), []);
  let icon = React.useMemo(() => {
    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
  });
  const themeState = useThemeObserver();
  let previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
  if (previewUrl && isSupportTheming) {
    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
  }
  const [isMouseOver, setMouseOver] = React.useState(false);
  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: () => {
      setMouseOver(true);
      onIframeMouseEnter === null || onIframeMouseEnter === void 0 ? void 0 : onIframeMouseEnter();
    },
    onContentMouseLeave: () => {
      setMouseOver(false);
      onIframeMouseLeave === null || onIframeMouseLeave === void 0 ? 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
  }));
});
const EmbedCardResolvedViewWithFG = componentWithFG('rovo_chat_embed_card_dwell_and_hover_metrics', EmbedCardResolvedViewUpdated, EmbedCardResolvedViewOld);
export { EmbedCardResolvedViewWithFG as EmbedCardResolvedView };