/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
import _extends from "@babel/runtime/helpers/extends";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { FormattedMessage } from 'react-intl-next';
import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
import { fg } from '@atlaskit/platform-feature-flags';
import { N500 } from '@atlaskit/theme/colors';
import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
import { messages } from '../../../messages';
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"
  });
};
export const InlineCardUnauthorizedView = ({
  url,
  id,
  icon,
  onAuthorise,
  onClick,
  isSelected,
  testId = 'inline-card-unauthorized-view',
  showHoverPreview = false,
  truncateInline,
  context
}) => {
  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(() => {
    return /*#__PURE__*/React.createElement(ActionButton, {
      onClick: handleConnectAccount,
      viewType: 'unauthorised',
      testId: "button-connect-account"
    }, /*#__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, ${N500})`
  }), fg('navx-2479-sl-fix-inilne-card-show-connect-button') ? onAuthorise && renderActionButton() : renderActionButton());
  if (onAuthorise && showHoverPreview) {
    return /*#__PURE__*/React.createElement(HoverCard, {
      url: url,
      id: id
    }, inlineCardUnauthenticatedView);
  }
  return inlineCardUnauthenticatedView;
};