import React from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
import { HoverCard } from '../../HoverCard';
import InlineLozenge from '../common/inline-lozenge';
import { Frame } from '../Frame';
import { IconAndTitleLayout } from '../IconAndTitleLayout';
import { InlineCardResolvedViewFunctional } from './InlineCardResolvedViewFunctional';
class InlineCardResolvedViewClass extends React.Component {
  renderLozenge() {
    var _lozenge$style3, _lozenge$style4;
    const {
      lozenge
    } = this.props;
    if (!lozenge || !(lozenge !== null && lozenge !== void 0 && lozenge.text)) {
      return null;
    }
    if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
      const stateMetricMatch = lozenge.text.match(/^(.+?)\s+-\s+(\d+(?:\.\d+)?)$/);
      if (stateMetricMatch) {
        var _lozenge$style, _lozenge$style2;
        const [, label, metric] = stateMetricMatch;
        const appearance = lozenge.appearance || 'neutral';
        return /*#__PURE__*/React.createElement(InlineLozenge, {
          testId: "inline-card-resolved-view-lozenge",
          appearance: appearance,
          style: {
            backgroundColor: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style = lozenge.style) === null || _lozenge$style === void 0 ? void 0 : _lozenge$style.backgroundColor,
            color: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style2 = lozenge.style) === null || _lozenge$style2 === void 0 ? void 0 : _lozenge$style2.color
          },
          trailingMetric: metric
        }, label);
      }
    }
    const appearance = lozenge.appearance || 'default';
    return /*#__PURE__*/React.createElement(InlineLozenge, {
      testId: "inline-card-resolved-view-lozenge",
      appearance: appearance,
      style: {
        backgroundColor: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style3 = lozenge.style) === null || _lozenge$style3 === void 0 ? void 0 : _lozenge$style3.backgroundColor,
        color: lozenge === null || lozenge === void 0 ? void 0 : (_lozenge$style4 = lozenge.style) === null || _lozenge$style4 === void 0 ? void 0 : _lozenge$style4.color
      },
      isBold: lozenge.isBold !== false
    }, lozenge.text);
  }
  render() {
    const {
      id,
      title = '',
      isSelected,
      isHovered,
      onClick,
      icon,
      link,
      testId = 'inline-card-resolved-view',
      titleTextColor,
      titlePrefix,
      showHoverPreview = false,
      hoverPreviewOptions,
      actionOptions,
      truncateInline,
      type,
      hideIconLoadingSkeleton
    } = this.props;
    const inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
      testId: testId,
      link: link,
      isSelected: isSelected,
      isHovered: isHovered,
      onClick: onClick,
      truncateInline: truncateInline
    }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
      emoji: titlePrefix,
      icon: icon,
      title: title,
      titleTextColor: titleTextColor,
      type: type,
      hideIconLoadingSkeleton: hideIconLoadingSkeleton
    }), this.renderLozenge());
    if (showHoverPreview && link) {
      return /*#__PURE__*/React.createElement(HoverCard, {
        id: id,
        url: link,
        actionOptions: actionOptions,
        hoverPreviewOptions: hoverPreviewOptions
      }, inlineCardResolvedView);
    }
    return inlineCardResolvedView;
  }
}
export const InlineCardResolvedView = componentWithFG('smart-card-inline-resolved-view-refactor', InlineCardResolvedViewFunctional, InlineCardResolvedViewClass);