/* ResolvedView.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./ResolvedView.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import Loadable from 'react-loadable';
import LinkGlyph from '@atlaskit/icon/core/link';
import { fg } from '@atlaskit/platform-feature-flags';
import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
import { CardDisplay } from '../../../constants';
import extractRovoChatAction from '../../../extractors/flexible/actions/extract-rovo-chat-action';
import { getExtensionKey } from '../../../state/helpers';
import useEmbedRovoActionsFooterExperiment from '../../../state/hooks/use-embed-rovo-actions-footer-experiment';
import useRovoConfig from '../../../state/hooks/use-rovo-config';
import { getPreviewUrlWithTheme, isProfileType } from '../../../utils';
import { getRovoPostAuthPromptKeys } from '../../common/rovo-post-auth-prompts';
import { ExpandedFrame } from '../components/ExpandedFrame';
import { Frame } from '../components/Frame';
import { ImageIcon } from '../components/ImageIcon';
import { useEmbedResolvePostMessageListener } from '../useEmbedResolvePostMessageListener';
const EmbedRovoActionsFooter = Loadable({
  loader: () => import( /* webpackChunkName: "smart-card-embed-rovo-actions-footer" */'../components/rovo-actions-footer').then(module => module.default),
  loading: () => null
});
EmbedRovoActionsFooter.displayName = 'lazy(EmbedRovoActionsFooter)';
const styles = {
  contentWithFooter: "_1e0c1txw _2lx21bp4 _4t3i1osq _1tkeidpf",
  frameWithFooter: "_16jlkb7n _1tkeidpf",
  footer: "_1e0c1txw _1bah1y6m _85i5u2gc _1q51u2gc _y4tiu2gc _bozgu2gc"
};
const EmbedFrameWithRovoFooter = ({
  actionOptions,
  details,
  frame,
  link,
  testId
}) => {
  const {
    rovoOptions,
    product
  } = useRovoConfig();
  const {
    isEnabled: isEmbedRovoActionsFooterEnabled
  } = useEmbedRovoActionsFooterExperiment(link, actionOptions, rovoOptions, product);
  const rovoActionData = React.useMemo(() => isEmbedRovoActionsFooterEnabled && details ? extractRovoChatAction({
    response: details,
    rovoConfig: {
      rovoOptions,
      product
    },
    product,
    actionOptions,
    appearance: CardDisplay.Embed,
    isEmbedRovoActionsFooterExperimentEnabled: isEmbedRovoActionsFooterEnabled
  }) : undefined, [actionOptions, details, isEmbedRovoActionsFooterEnabled, product, rovoOptions]);
  const prompts = React.useMemo(() => {
    if (!isEmbedRovoActionsFooterEnabled) {
      return [];
    }
    return getRovoPostAuthPromptKeys({
      extensionKey: getExtensionKey(details)
    });
  }, [details, isEmbedRovoActionsFooterEnabled]);
  const footer = React.useMemo(() => rovoActionData && prompts.length > 0 ? /*#__PURE__*/React.createElement(EmbedRovoActionsFooter, {
    actionData: rovoActionData,
    prompts: prompts,
    testId: `${testId}-rovo-actions-footer`
  }) : undefined, [prompts, rovoActionData, testId]);
  return footer ? /*#__PURE__*/React.createElement("div", {
    className: ax([styles.contentWithFooter])
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.frameWithFooter])
  }, frame), /*#__PURE__*/React.createElement("div", {
    className: ax([styles.footer])
  }, footer)) : frame;
};
const EmbedFrameWithoutRovoFooter = ({
  frame
}) => frame;
const EmbedFrameWithOptionalRovoFooter = componentWithFG('platform_sl_3p_auth_rovo_embed_footer_kill_switch', EmbedFrameWithRovoFooter, EmbedFrameWithoutRovoFooter);
export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
  actionOptions,
  link,
  context,
  details,
  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);
  const frame = /*#__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
  });
  const frameWithFooter = /*#__PURE__*/React.createElement(EmbedFrameWithOptionalRovoFooter, {
    actionOptions: actionOptions,
    details: details,
    frame: frame,
    link: link,
    testId: testId
  });
  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();
    }
  }, frameWithFooter);
});