/* UnauthorisedView.tsx generated by @compiled/babel-plugin v0.39.1 */
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
var _excluded = ["testId"];
import "./UnauthorisedView.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 { Box } from '@atlaskit/primitives/compiled';
import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
import { ElementName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../constants';
import { messages } from '../../../messages';
import { useFlexibleCardContext } from '../../../state/flexible-ui-context';
import { hasAuthScopeOverrides } from '../../../state/helpers';
import { isNewBlockcardUnauthorizedRefreshExperimentEnabled } from '../../../utils/experiments';
import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
import FlexibleCard from '../../FlexibleCard';
import ActionGroup from '../../FlexibleCard/components/blocks/action-group';
import Block from '../../FlexibleCard/components/blocks/block';
import ElementGroup from '../../FlexibleCard/components/blocks/element-group';
import { renderElementItems } from '../../FlexibleCard/components/blocks/utils';
import { LinkIcon, Title } from '../../FlexibleCard/components/elements';
import { AuthorizeAction } from '../actions/AuthorizeAction';
import unauthIllustrationGeneral from './assets/general@2x.png';
import UnresolvedView from './unresolved-view';
import { FlexibleCardUiOptions, titleBlockOptions } from './utils';
import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
var contentStyles = null;
var newContentStyles = null;
var contentAdditionalStyles = null;
var newTitleBlockStyles = null;
var intermediumGapStyles = null;
var titleBlockStyles = null;
var previewBlockStyle = null;
var previewBlockStyleWithOverlap = null;
var linkIconStyles = null;
var containerStyles = null;
var previewBlockImageStyle = null;
var styles = {
  titleBoxCard: "_1e0c1txw _2lx2vrvc _4cvr1h6o _1bsb1osq"
};
var getBetterTitle = function getBetterTitle(url) {
  // List of regexps to extract human-readable titles from URLs
  // Each regex should have a capture group for the title at index 1
  var titleExtractors = [
  // Dropbox: https://www.dropbox.com/scl/fi/scebraopvx4bni0sechq9/Atlas23_D1_A_0014.jpg?rlkey=... -> Atlas23_D1_A_0014.jpg
  /^https:\/\/www\.dropbox\.com\/scl\/fi\/[^\/]+\/([^\/\?]+)/,
  // Dropbox: https://www.dropbox.com/home/Teamwork%20Ecosystem?preview=xsociety00.dat -> Teamwork Ecosystem
  /^https:\/\/www\.dropbox\.com\/home\/([^\/\?]+)/,
  // Dropbox: https://www.dropbox.com/home?preview=Insomnia-All_2019-03-14.json -> Insomnia-All_2019-03-14.json
  /^https:\/\/www\.dropbox\.com\/home\?(?:.*?&)?preview=([^&#]+)/,
  // Dropbox: https://www.dropbox.com/preview/AI%20Contest -> AI Contest
  /^https:\/\/www\.dropbox\.com\/preview\/([^&?]+)/,
  // Dropbox: https://www.dropbox.com/s/votiehk00g4opif/xsociety00.dat?dl=0 -> xsociety00.dat
  /^https:\/\/www\.dropbox\.com\/(?:s|sh|sc|t)\/[^\/]+\/([^\/\?]+)/,
  // Figma: https://www.figma.com/slides/vW47To0dYPnT7jlrJdUd7h/Universal-Create-in-TwC?node-id=... -> Universal-Create-in-TwC
  // Also supports: /file/, /design/, /board/, /proto/
  /^https:\/\/(?:[\w.-]+\.)?figma\.com\/(?:design|board|file|proto|slides)\/[0-9a-zA-Z]{22,128}\/([^\/\?]+)/,
  // OneDrive: https://1drv.ms/w/s!ABC123DEF456/Project_Plan.docx?e=abcdEF -> Project_Plan.docx
  /^https:\/\/1drv\.ms\/[a-z]+\/s![^\/]+\/([^\/\?]+)/,
  // Miro: https://miro.com/app/board/uXjVOPnT123=/my-board-name/ -> my-board-name
  /^https:\/\/miro\.com\/app\/board\/[^\/]+\/([^\/\?]+)\/?/];

  // Try each extractor pattern
  for (var _i = 0, _titleExtractors = titleExtractors; _i < _titleExtractors.length; _i++) {
    var pattern = _titleExtractors[_i];
    var match = url.match(pattern);
    if (match) {
      var extracted = decodeURIComponent(match[1]);
      if (extracted) {
        return extracted;
      }
    }
  }
  try {
    var _URL = new URL(url),
      pathname = _URL.pathname,
      search = _URL.search;
    if (pathname.length > 1) {
      return pathname.substring(1);
    } else {
      return search;
    }
  } catch (_unused) {
    return url;
  }
};
var NewUnauthorisedBlock = function NewUnauthorisedBlock(_ref) {
  var _useFlexibleCardConte, _data$preview$url, _data$preview;
  var actions = _ref.actions,
    children = _ref.children,
    url = _ref.url,
    CompetitorPrompt = _ref.CompetitorPrompt,
    testId = _ref.testId;
  var _ref2 = (_useFlexibleCardConte = useFlexibleCardContext()) !== null && _useFlexibleCardConte !== void 0 ? _useFlexibleCardConte : {
      ui: undefined,
      data: undefined
    },
    ui = _ref2.ui,
    data = _ref2.data;
  var hasActions = actions && actions.length > 0;
  var actionGroup = hasActions ? /*#__PURE__*/React.createElement(ActionGroup, {
    size: SmartLinkSize.Large,
    items: actions
  }) : null;
  var competitorPrompt = CompetitorPrompt && data !== null && data !== void 0 && data.url ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
    sourceUrl: data === null || data === void 0 ? void 0 : data.url,
    linkType: 'card'
  }) : null;
  var title = /*#__PURE__*/React.createElement(Title, {
    hideTooltip: false,
    maxLines: 1,
    theme: ui === null || ui === void 0 ? void 0 : ui.theme,
    text: getBetterTitle(url),
    className: ax(["_k48p1pd9 _syaz13af"])
  });
  var position = titleBlockOptions.position;
  var overrideUrl = (_data$preview$url = data === null || data === void 0 || (_data$preview = data.preview) === null || _data$preview === void 0 ? void 0 : _data$preview.url) !== null && _data$preview$url !== void 0 ? _data$preview$url : unauthIllustrationGeneral;
  return /*#__PURE__*/React.createElement(Block, _extends({}, titleBlockOptions, {
    testId: "".concat(testId, "-errored-view"),
    className: ax(["_7cca15wb _1f3816vg"])
  }), /*#__PURE__*/React.createElement(ElementGroup, {
    direction: SmartLinkDirection.Vertical,
    width: SmartLinkWidth.Flexible,
    size: SmartLinkSize.Medium,
    className: ax(["_zulputpp"])
  }, /*#__PURE__*/React.createElement(Block, null, /*#__PURE__*/React.createElement(LinkIcon, {
    position: position,
    size: SmartLinkSize.Medium,
    isTiledIcon: true,
    className: ax(["_vsqgglyw"])
  }), /*#__PURE__*/React.createElement(ElementGroup, {
    direction: SmartLinkDirection.Vertical,
    width: SmartLinkWidth.Flexible,
    size: SmartLinkSize.Large,
    className: ax(["_zulpidpf"])
  }, competitorPrompt ? /*#__PURE__*/React.createElement(Box, {
    xcss: styles.titleBoxCard
  }, title, competitorPrompt) : title, /*#__PURE__*/React.createElement(ElementGroup, {
    size: SmartLinkSize.Medium,
    direction: SmartLinkDirection.Horizontal
  }, renderElementItems([{
    name: ElementName.HostName
  }])))), children, actionGroup), hasActions ? /*#__PURE__*/React.createElement("div", {
    className: ax(["_1reo15vq _18m915vq _1bsb1o87 _1wpz1fhb _1dptglyw", "_1bsbo60d"])
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      backgroundImage: "url(".concat(overrideUrl, ")")
    },
    className: ax(["_kqswstnw _154iidpf _1xi2idpf _94n5idpf _4t3i1osq _1bsb1o87 _1lrw1f51 _ouxl1ssb _12vemgnk"])
  })) : null);
};

/**
 * This view represents a Block card that has an 'Unauthorized' status .
 * It should have a "Connect" button that will allow a user to connect their account and view the block card.
 *
 * @see SmartLinkStatus
 * @see FlexibleCardProps
 */
var UnauthorisedView = function UnauthorisedView(_ref3) {
  var _extractSmartLinkProv;
  var _ref3$testId = _ref3.testId,
    testId = _ref3$testId === void 0 ? 'smart-block-unauthorized-view' : _ref3$testId,
    props = _objectWithoutProperties(_ref3, _excluded);
  var cardState = props.cardState,
    onAuthorize = props.onAuthorize;
  var providerName = (_extractSmartLinkProv = extractSmartLinkProvider(cardState.details)) === null || _extractSmartLinkProv === void 0 ? void 0 : _extractSmartLinkProv.text;
  var isProductIntegrationSupported = hasAuthScopeOverrides(cardState.details);
  var _useAnalyticsEvents = useAnalyticsEvents(),
    fireEvent = _useAnalyticsEvents.fireEvent;
  var handleAuthorize = useCallback(function () {
    if (onAuthorize) {
      fireEvent('track.applicationAccount.authStarted', {});
      onAuthorize();
    }
  }, [onAuthorize, fireEvent]);
  var content = useMemo(function () {
    return onAuthorize ? /*#__PURE__*/React.createElement(UnauthorisedViewContent, {
      providerName: providerName,
      isProductIntegrationSupported: isProductIntegrationSupported,
      testId: testId
    }) : /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
      values: {
        context: providerName
      }
    }));
  }, [isProductIntegrationSupported, onAuthorize, providerName, testId]);
  var actions = useMemo(function () {
    return onAuthorize ? [AuthorizeAction(handleAuthorize, providerName)] : [];
  }, [handleAuthorize, onAuthorize, providerName]);
  if (isNewBlockcardUnauthorizedRefreshExperimentEnabled(true)) {
    return /*#__PURE__*/React.createElement(FlexibleCard, _extends({
      appearance: "block",
      onAuthorize: onAuthorize,
      origin: "smartLinkCard",
      testId: testId,
      ui: FlexibleCardUiOptions
    }, props), /*#__PURE__*/React.createElement(NewUnauthorisedBlock, _extends({}, props, {
      actions: actions,
      testId: testId
    }), /*#__PURE__*/React.createElement("div", {
      "data-testid": "".concat(testId, "-content"),
      className: ax(["_11c8fhey _syazi7uo _19pku2gc", actions.length > 0 && "_1reo15vq _18m915vq _otyrpxbi _p12f1osq _o5721q9c _1bto1l2s"])
    }, content)));
  } else {
    return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
      actions: actions,
      testId: testId
    }), /*#__PURE__*/React.createElement("div", {
      "data-testid": "".concat(testId, "-content"),
      className: ax(["_11c8wadc _syazi7uo _19pku2gc"])
    }, content));
  }
};
var _default_1 = withFlexibleUIBlockCardStyle(UnauthorisedView);
export default _default_1;