/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useEffect, useRef } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { FormattedMessage } from 'react-intl';
import { LinkButton } from '@atlaskit/button/new';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, Text, xcss } from '@atlaskit/primitives';
import NotFoundIllustration from './NotFoundIllustration';
export default function EmptyState(_ref) {
  var onExternalLinkClick = _ref.onExternalLinkClick,
    focusOnEmptyStateButton = _ref.focusOnEmptyStateButton;
  var buttonRef = useRef(null);
  useEffect(function () {
    if (focusOnEmptyStateButton && buttonRef.current) {
      buttonRef.current.focus();
    }
  }, [focusOnEmptyStateButton]);
  return jsx("div", {
    css: emptyStateWrapper,
    "data-testid": "empty-state-wrapper"
  }, jsx(NotFoundIllustration, null), jsx("div", {
    css: emptyStateHeading
  }, jsx(FormattedMessage, {
    id: "fabric.editor.elementbrowser.search.empty-state.heading",
    defaultMessage: "Nothing matches your search",
    description: "Empty state heading"
  })), jsx("div", {
    css: emptyStateSubHeading
  }, jsx(Text, null, jsx(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"
  })), jsx(Box, {
    xcss: externalLinkWrapper
  }, jsx(LinkButton, {
    appearance: "primary",
    target: "_blank",
    ref: buttonRef,
    href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
    onClick: onExternalLinkClick
  }, jsx(FormattedMessage, {
    id: "fabric.editor.elementbrowser.search.empty-state.sub-heading.link",
    defaultMessage: "Explore Atlassian Marketplace",
    description: "Empty state sub-heading external link"
  })))));
}
var emptyStateHeading = css({
  font: "var(--ds-font-heading-medium, normal 653 20px/24px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
  color: "var(--ds-text, #292A2E)",
  marginTop: "var(--ds-space-300, 24px)"
});
var emptyStateSubHeading = css({
  marginTop: "var(--ds-space-200, 16px)",
  maxWidth: '400px',
  textAlign: 'center'
});
var emptyStateWrapper = css({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  width: '100%'
});
var externalLinkWrapper = xcss({
  marginTop: 'space.150'
});