/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useCallback, useMemo } from 'react';
import { FormattedMessage } from 'react-intl-next';
import { extractSmartLinkProvider } from '@atlaskit/link-extractors';
import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
import { ActionName, CardDisplay } from '../../../../../constants';
import { messages } from '../../../../../messages';
import { useSmartCardActions } from '../../../../../state/actions';
import { hasAuthScopeOverrides } from '../../../../../state/helpers';
import UnauthorisedViewContent from '../../../../common/UnauthorisedViewContent';
import FlexibleCard from '../../../../FlexibleCard';
import { CustomBlock } from '../../../../FlexibleCard/components/blocks';
import ActionGroup from '../../../../FlexibleCard/components/blocks/action-group';
import { LinkIcon } from '../../../../FlexibleCard/components/elements';
var connectButtonStyles = null;
var titleBlockStyles = null;
var mainTextStyles = null;
var HoverCardUnauthorisedView = function HoverCardUnauthorisedView(_ref) {
  var _extractSmartLinkProv;
  var _ref$id = _ref.id,
    id = _ref$id === void 0 ? '' : _ref$id,
    flexibleCardProps = _ref.flexibleCardProps,
    _ref$testId = _ref.testId,
    testId = _ref$testId === void 0 ? 'hover-card-unauthorised-view' : _ref$testId,
    url = _ref.url;
  var cardState = flexibleCardProps.cardState;
  var providerName = (_extractSmartLinkProv = extractSmartLinkProvider(cardState.details)) === null || _extractSmartLinkProv === void 0 ? void 0 : _extractSmartLinkProv.text;
  var isProductIntegrationSupported = hasAuthScopeOverrides(cardState.details);
  var _useSmartCardActions = useSmartCardActions(id, url),
    authorize = _useSmartCardActions.authorize;
  var _useAnalyticsEvents = useAnalyticsEvents(),
    fireEvent = _useAnalyticsEvents.fireEvent;
  var handleAuthorize = useCallback(function () {
    if (authorize) {
      fireEvent('track.applicationAccount.authStarted', {});
      authorize(CardDisplay.HoverCardPreview);
    }
  }, [authorize, fireEvent]);
  var actions = useMemo(function () {
    return [{
      name: ActionName.CustomAction,
      content: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
        values: {
          context: providerName
        }
      })),
      onClick: handleAuthorize
    }];
  }, [handleAuthorize, providerName]);
  return /*#__PURE__*/React.createElement(FlexibleCard, _extends({}, flexibleCardProps, {
    testId: testId
  }), /*#__PURE__*/React.createElement(CustomBlock, {
    testId: "".concat(testId, "-title"),
    className: ax(["_zulpu2gc _13mh1pd9"])
  }, /*#__PURE__*/React.createElement(LinkIcon, null), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
    values: {
      context: providerName
    }
  }))), /*#__PURE__*/React.createElement(CustomBlock, {
    testId: "".concat(testId, "-content"),
    className: ax(["_11c8rymc _19pku2gc"])
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
    providerName: providerName,
    isProductIntegrationSupported: isProductIntegrationSupported
  }))), /*#__PURE__*/React.createElement(CustomBlock, {
    testId: "".concat(testId, "-button"),
    className: ax(["_1bahesu3 _19pku2gc"])
  }, /*#__PURE__*/React.createElement(ActionGroup, {
    items: actions,
    appearance: "primary"
  })));
};
export default HoverCardUnauthorisedView;