/* index.tsx generated by @compiled/babel-plugin v0.40.0 */
import _extends from "@babel/runtime/helpers/extends";
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { di } from 'react-magnetic-di';
import { cx } from '@atlaskit/css';
import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box, Pressable } from '@atlaskit/primitives/compiled';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
import { messages } from '../../../messages';
import { getCachedProviderPctMapAndRefresh } from '../../../state/services/personalization';
import { HoverCard } from '../../HoverCard';
import { ActionButton } from '../common/action-button';
import { Frame } from '../Frame';
import { IconAndTitleLayout } from '../IconAndTitleLayout';
const fallbackUnauthorizedIcon = () => {
  return /*#__PURE__*/React.createElement(LockLockedIcon, {
    color: "var(--ds-icon-danger, #C9372C)",
    label: "error"
  });
};

/**
 * When persisted personalization adoption from {@link getCachedProviderPctMapAndRefresh} is strictly below this value,
 * the pill uses exploratory "previewing" copy instead of a percentage headline.
 */
const SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD = 30;
const SOCIAL_PROOF_TRAIT_NAME = 'sl_3p_connected_providers_site_pct';
const socialProofPillStyles = {
  strong: "_k48pwu06",
  root: "_2rko12b0 _1e0c1nu9 _4cvr1h6o _vchhusvi _p12f1osq _bfhk1dpa _syazazsu _y3gn18uv _1wybtjj4 _s7n4t94y _ca0qv77o _n3tdv77o _u5f312x7 _19bv12x7 _2hwx1b66 _irr3plhp _1di61gdz",
  label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c",
  wrappingLabel: "_1reoewfl _18m9ewfl _1btozryt _o5721btx _1nmz9jpi",
  button: "_bfhk1j28 _u5f3ze3t _19bvze3t _ca0qze3t _n3tdze3t",
  pressableContents: "_1e0c1bgi",
  inlineGroup: "_1e0c1nu9"
};

/**
 * Renders the social-proof pill and Connect button using persisted percentages only ({@link getCachedProviderPctMapAndRefresh}) — no
 * loading skeleton; either the cached percentage is shown or the legacy long connect label is used.
 *
 * Only mounted when the parent has passed the killswitch and
 * `platform_sl_3p_preauth_social_proof_inline_cta`. See platform docs: `rules-of-hooks.md` "Should §1".
 */
const UnauthorisedConnectWithSocialProof = ({
  context,
  extensionKey,
  testId,
  onConnectClick,
  isPreviewCTATreatment
}) => {
  var _context$trim;
  const providerPctMap = getCachedProviderPctMapAndRefresh(SOCIAL_PROOF_TRAIT_NAME);

  // Will be false if this is the first render, when we fetch traits and store to local storage,
  // or if there wasn't our trait for it.
  const isProviderPctMapLoaded = providerPctMap !== null;

  // Percent of current user team (same tenant users) who are connected to this extension.
  const connectedPct = extensionKey && isProviderPctMapLoaded ? providerPctMap[extensionKey] : undefined;
  const trimmedProviderDisplayName = (_context$trim = context === null || context === void 0 ? void 0 : context.trim()) !== null && _context$trim !== void 0 ? _context$trim : '';
  const hasProviderDisplayName = trimmedProviderDisplayName.length > 0;
  const isSocialProofUsageHighEnough = connectedPct !== undefined && connectedPct >= SOCIAL_PROOF_TEAM_PREVIEW_THRESHOLD;

  /**
   * As long as trait is loaded we show the pill/lozange.
   */
  const showSocialProofPill = providerPctMap !== null && expValEquals('platform_sl_3p_preauth_social_proof_inline_cta', 'isEnabled', true);
  const bold = chunks => /*#__PURE__*/React.createElement(Box, {
    as: "strong",
    xcss: socialProofPillStyles.strong
  }, chunks);

  // As long as pill is shown it will be one of four messages depending on percent and provider presence:
  // - 45% of your team sees Figma previews
  // - 45% of your team sees richer previews
  // - Your team sees richer Figma previews
  // - Your team sees richer previews
  const socialProofPillContent = isSocialProofUsageHighEnough ? hasProviderDisplayName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.social_proof_inline_cta_tag_high_with_context, {
    values: {
      connectedPct,
      context: trimmedProviderDisplayName,
      b: bold
    }
  })) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.social_proof_inline_cta_tag_high_no_context, {
    values: {
      connectedPct,
      b: bold
    }
  })) : hasProviderDisplayName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.social_proof_inline_cta_tag_low_with_context, {
    values: {
      context: trimmedProviderDisplayName
    }
  })) :
  /*#__PURE__*/
  // Unlikely case, but possible from TS standpoint.
  React.createElement(FormattedMessage, messages.social_proof_inline_cta_tag_low_no_context);
  const buttonContent = /*#__PURE__*/React.createElement(React.Fragment, null, showSocialProofPill ? /*#__PURE__*/React.createElement(Box, {
    as: "span",
    xcss: socialProofPillStyles.root,
    testId: `${testId}-social-proof-tag`
  }, /*#__PURE__*/React.createElement(Box, {
    as: "span",
    xcss: cx(socialProofPillStyles.label, fg('platform_lp_social_proof_inline_overflow_bug') && socialProofPillStyles.wrappingLabel)
  }, socialProofPillContent)) : null, /*#__PURE__*/React.createElement(ActionButton, {
    onClick: onConnectClick,
    viewType: "unauthorised",
    testId: "button-connect-account",
    isSlimDesign: showSocialProofPill
  }, isPreviewCTATreatment ? /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_preview) : showSocialProofPill ? /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_inline_social_proof) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
    values: {
      context
    }
  }))));
  return showSocialProofPill ? /*#__PURE__*/React.createElement(Pressable, {
    onClick: onConnectClick,
    style: {
      font: `inherit`
    },
    xcss: cx(socialProofPillStyles.button, fg('platform_lp_social_proof_inline_overflow_bug') && socialProofPillStyles.pressableContents)
  }, fg('platform_lp_social_proof_inline_overflow_bug') ? /*#__PURE__*/React.createElement(Box, {
    as: "span",
    xcss: socialProofPillStyles.inlineGroup
  }, buttonContent) : buttonContent) : buttonContent;
};
export const InlineCardUnauthorizedView = ({
  url,
  id,
  icon,
  onAuthorise,
  onClick,
  isSelected,
  testId = 'inline-card-unauthorized-view',
  showHoverPreview = false,
  truncateInline,
  context,
  extensionKey
}) => {
  const frameRef = React.useRef(null);
  const {
    fireEvent
  } = useAnalyticsEvents();
  const handleConnectAccount = React.useCallback(event => {
    event.preventDefault();
    event.stopPropagation();
    if (onAuthorise) {
      fireEvent('track.applicationAccount.authStarted', {});
      onAuthorise();
    }
  }, [fireEvent, onAuthorise]);
  const renderActionButton = React.useCallback(() => {
    const isPreviewCTATreatment = fg('rovogrowth-635-pre-auth-cta-preview-fg') && expValEquals('rovogrowth-635-pre-auth-cta-preview-exp', 'isEnabled', true);
    return /*#__PURE__*/React.createElement(ActionButton, {
      onClick: handleConnectAccount,
      viewType: 'unauthorised',
      testId: "button-connect-account"
    }, isPreviewCTATreatment ? /*#__PURE__*/React.createElement(FormattedMessage, messages.connect_link_account_preview) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
      values: {
        context
      }
    })));
  }, [handleConnectAccount, context]);
  const inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
    testId: testId,
    isSelected: isSelected,
    ref: frameRef,
    truncateInline: truncateInline,
    viewType: "unauthorised"
  }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
    icon: icon ? icon : fallbackUnauthorizedIcon(),
    title: url,
    link: url,
    onClick: onClick,
    titleColor: "var(--ds-text-subtle, #505258)"
  }), onAuthorise && (fg('platform_sl_3p_preauth_soc_proof_inline_killswitch') ? /*#__PURE__*/React.createElement(UnauthorisedConnectWithSocialProof, {
    context: context,
    extensionKey: extensionKey,
    testId: testId,
    onConnectClick: handleConnectAccount,
    isPreviewCTATreatment: fg('rovogrowth-635-pre-auth-cta-preview-fg') && expValEquals('rovogrowth-635-pre-auth-cta-preview-exp', 'isEnabled', true)
  }) : renderActionButton()));
  if (onAuthorise && showHoverPreview) {
    return /*#__PURE__*/React.createElement(HoverCard, {
      url: url,
      id: id
    }, inlineCardUnauthenticatedView);
  }
  return inlineCardUnauthenticatedView;
};