import _extends from "@babel/runtime/helpers/extends";
import React, { useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import Button from '@atlaskit/button/new';
import { messages } from '../../../../messages';
import { toMessage } from '../../../../utils/intl-utils';
import UnresolvedView from '../unresolved-view';
import { ForbiddenSVG } from './forbidden-svg';
const ForbiddenView = ({
  context,
  onAuthorize,
  accessContext,
  testId = 'embed-card-forbidden-view',
  ...unresolvedViewProps
}) => {
  const {
    icon,
    image,
    text = ''
  } = context !== null && context !== void 0 ? context : {};
  const {
    accessType,
    hostname,
    titleMessageKey,
    descriptiveMessageKey,
    callToActionMessageKey,
    action
  } = accessContext !== null && accessContext !== void 0 ? accessContext : {};
  const values = useMemo(() => {
    var _context$text;
    const product = (_context$text = context === null || context === void 0 ? void 0 : context.text) !== null && _context$text !== void 0 ? _context$text : '';
    return {
      context: product,
      product,
      hostname: /*#__PURE__*/React.createElement("b", null, hostname)
    };
  }, [hostname, context === null || context === void 0 ? void 0 : context.text]);

  /**
   * if there is a request access context, but no action to perform, do not show any button.
   * By default, a "Try another account" button shows, but with request access context, we don't
   * want to encourage users to try another account, if their request is already pending, etc.
   */
  const button = useMemo(() => {
    var _action$promise;
    const onEmbedCardClick = (_action$promise = action === null || action === void 0 ? void 0 : action.promise) !== null && _action$promise !== void 0 ? _action$promise : onAuthorize;
    if (!onEmbedCardClick) {
      return null;
    }
    return /*#__PURE__*/React.createElement(Button, {
      testId: `button-${(action === null || action === void 0 ? void 0 : action.id) || 'connect-other-account'}`,
      appearance: "primary",
      onClick: onEmbedCardClick,
      isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
    }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, toMessage(messages.try_another_account, callToActionMessageKey), {
      values: values
    })));
  }, [accessType, action === null || action === void 0 ? void 0 : action.id, action === null || action === void 0 ? void 0 : action.promise, callToActionMessageKey, onAuthorize, values]);
  return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, unresolvedViewProps, {
    icon: icon,
    image: image !== null && image !== void 0 ? image : /*#__PURE__*/React.createElement(ForbiddenSVG, null),
    testId: testId,
    text: text,
    title: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, toMessage(messages.invalid_permissions, titleMessageKey), {
      values: values
    })),
    description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, toMessage(messages.invalid_permissions_description, descriptiveMessageKey), {
      values: values
    })),
    button: button
  }));
};
export default ForbiddenView;