import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import LinkGlyph from '@atlaskit/icon/core/link';
import { fg } from '@atlaskit/platform-feature-flags';
import { useThemeObserver } from '@atlaskit/tokens';
import { getPreviewUrlWithTheme, isProfileType } from '../../../utils';
import { ExpandedFrame } from '../components/ExpandedFrame';
import { Frame } from '../components/Frame';
import { ImageIcon } from '../components/ImageIcon';
import { useEmbedResolvePostMessageListener } from '../useEmbedResolvePostMessageListener';
export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
  link,
  context,
  onClick,
  onAuxClick,
  onContextMenu,
  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 iconLabel = context === null || context === void 0 ? void 0 : context.iconLabel;
  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",
    testId: "embed-card-fallback-icon",
    color: "currentColor"
  }), []);
  const icon = React.useMemo(() => {
    if ( /*#__PURE__*/React.isValidElement(iconFromContext)) {
      return iconFromContext;
    }
    return /*#__PURE__*/React.createElement(ImageIcon, _extends({
      src: src
    }, fg('platform_lp_use_entity_icon_url_for_icon') ? {
      alt: iconLabel
    } : undefined, {
      default: linkGlyph,
      appearance: isProfileType(type) ? 'round' : 'square',
      hideLoadingSkeleton: hideIconLoadingSkeleton
    }));
  }, [iconFromContext, src, linkGlyph, type, hideIconLoadingSkeleton, iconLabel]);
  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,
    onAuxClick: onAuxClick,
    onContextMenu: onContextMenu,
    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(Frame, {
    url: previewUrl,
    isTrusted: isTrusted,
    testId: testId,
    ref: embedIframeRef,
    onIframeDwell: onIframeDwell,
    onIframeFocus: onIframeFocus,
    onIframeMouseEnter: onIframeMouseEnter,
    onIframeMouseLeave: onIframeMouseLeave,
    isMouseOver: isMouseOver,
    title: text,
    extensionKey: extensionKey
  }));
});