"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = EmptyState;
var _react = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _button = _interopRequireDefault(require("@atlaskit/button"));
var _primitives = require("@atlaskit/primitives");
var _NotFoundIllustration = _interopRequireDefault(require("./NotFoundIllustration"));
/** @jsx jsx */

function EmptyState(_ref) {
  var onExternalLinkClick = _ref.onExternalLinkClick;
  return (0, _react.jsx)("div", {
    css: emptyStateWrapper,
    "data-testid": "empty-state-wrapper"
  }, (0, _react.jsx)(_NotFoundIllustration.default, null), (0, _react.jsx)("div", {
    css: emptyStateHeading
  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
    id: "fabric.editor.elementbrowser.search.empty-state.heading",
    defaultMessage: "Nothing matches your search",
    description: "Empty state heading"
  })), (0, _react.jsx)("div", {
    css: emptyStateSubHeading
  }, (0, _react.jsx)("p", null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
    id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
    defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
    description: "Empty state sub-heading"
  })), (0, _react.jsx)(_primitives.Box, {
    xcss: externalLinkWrapper
  }, (0, _react.jsx)(_button.default, {
    appearance: "primary",
    target: "_blank",
    href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
    onClick: onExternalLinkClick
  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
    id: "fabric.editor.elementbrowser.search.empty-state.sub-heading.link",
    defaultMessage: "Explore Atlassian Marketplace",
    description: "Empty state sub-heading external link"
  })))));
}
var emptyStateHeading = (0, _react.css)({
  fontSize: '1.42857em',
  lineHeight: 1.2,
  color: "var(--ds-text, rgb(23, 43, 77))",
  fontWeight: 500,
  letterSpacing: '-0.008em',
  marginTop: "var(--ds-space-300, 24px)"
});
var emptyStateSubHeading = (0, _react.css)({
  marginTop: "var(--ds-space-200, 16px)",
  maxWidth: '400px',
  textAlign: 'center'
});
var emptyStateWrapper = (0, _react.css)({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  width: '100%'
});
var externalLinkWrapper = (0, _primitives.xcss)({
  marginTop: "var(--ds-space-150, 12px)"
});