/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
import { CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
import { succeedUfoExperience } from '../../../../../state/analytics';
import FlexibleCard from '../../../../FlexibleCard';
import { ActionBlock, AIFooterBlock, AISummaryBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
import { getMetadata } from '../../../utils';
import ImagePreview from '../../ImagePreview';
var hiddenSnippetStyles = null;
var titleBlockStyles = null;
var snippetBlockCss = null;
var actionBlockCss = null;
var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
  var _cardState$details;
  var cardState = _ref.cardState,
    extensionKey = _ref.extensionKey,
    flexibleCardProps = _ref.flexibleCardProps,
    isAISummaryEnabled = _ref.isAISummaryEnabled,
    onActionClick = _ref.onActionClick,
    titleBlockProps = _ref.titleBlockProps,
    id = _ref.id;
  var _useAnalyticsEvents = useAnalyticsEvents(),
    fireEvent = _useAnalyticsEvents.fireEvent;
  useEffect(function () {
    // Since this hover view is only rendered on resolved status,
    // there is no need to check for statuses.
    succeedUfoExperience('smart-link-rendered', id || 'NULL', {
      extensionKey: extensionKey,
      display: CardDisplay.HoverCardPreview
    });

    // UFO will disregard this if authentication experience has not yet been started
    succeedUfoExperience('smart-link-authenticated', id || 'NULL', {
      display: CardDisplay.HoverCardPreview
    });
    fireEvent('ui.smartLink.renderSuccess', {
      display: CardDisplay.HoverCardPreview
    });
  }, [extensionKey, fireEvent, id]);
  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
  var _useMemo = useMemo(function () {
      return getMetadata(extensionKey, data);
    }, [data, extensionKey]),
    primary = _useMemo.primary,
    secondary = _useMemo.secondary;
  var snippetHeight = React.useRef(0);
  var snippetBlockRef = useRef(null);
  var onSnippetRender = useCallback(function () {
    var _snippetBlockRef$curr, _snippetBlockRef$curr2;
    snippetHeight.current = (_snippetBlockRef$curr = (_snippetBlockRef$curr2 = snippetBlockRef.current) === null || _snippetBlockRef$curr2 === void 0 ? void 0 : _snippetBlockRef$curr2.getBoundingClientRect().height) !== null && _snippetBlockRef$curr !== void 0 ? _snippetBlockRef$curr : 0;
  }, []);
  var imagePreview = ImagePreview({
    fallbackElementHeight: snippetHeight.current,
    response: cardState.details
  });
  var snippet = imagePreview ? null : /*#__PURE__*/React.createElement(SnippetBlock, {
    className: ax(["_ca0q1b66"])
  });
  var aiSummaryMinHeight = snippet ? snippetHeight.current : 0;
  return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
    metadataPosition: SmartLinkPosition.Top,
    className: ax(["_zulpu2gc _quenze3t _oebj1txw _13mh1pd9"])
  })), /*#__PURE__*/React.createElement(MetadataBlock, {
    primary: primary,
    secondary: secondary,
    maxLines: 1,
    size: SmartLinkSize.Medium
  }), isAISummaryEnabled ? /*#__PURE__*/React.createElement(AISummaryBlock, {
    aiSummaryMinHeight: aiSummaryMinHeight,
    placeholder: snippet
  }) : snippet, /*#__PURE__*/React.createElement(SnippetBlock, {
    testId: "hidden-snippet",
    onRender: onSnippetRender,
    blockRef: snippetBlockRef,
    isHidden: true,
    className: ax(["_3um015vq _kqswstnw"])
  }), /*#__PURE__*/React.createElement(ActionBlock, {
    onClick: onActionClick,
    spaceInline: "space.100",
    className: ax(["_n3td1b66"])
  }), /*#__PURE__*/React.createElement(AIFooterBlock, null));
};
export default HoverCardResolvedView;