/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./index.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { Fragment, useCallback, useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
import ErrorIcon from '@atlaskit/icon/core/status-error';
import { fg } from '@atlaskit/platform-feature-flags';
import { Pressable } from '@atlaskit/primitives/compiled';
import { useAnalyticsEvents } from '../../../../../../../../common/analytics/generated/use-analytics-events';
import { messages } from '../../../../../../../../messages';
import useInvokeClientAction from '../../../../../../../../state/hooks/use-invoke-client-action';
import { getFormattedMessage } from '../../../../../utils';
const MAX_LINE_NUMBER = 8;
const styles = {
  contentStyles: "_zulpu2gc _11c81d4k _1reo15vq _18m915vq _1e0c1txw _1ul9idpf _2lx2vrvc _19pkv77o _4cvr1y6m _pqmefhey _102efhey _ngc0i7uo _1t4pi7uo",
  linkStyles: "_zulpu2gc _1reo15vq _18m915vq _11c8fhey _1e0c1txw _1ul9idpf _2lx2vrvc _4cvr1h6o _80omtlke _19pku2gc _18u0xy5q _otyrv77o",
  textStylesBase: "_11c81d4k _1reo15vq _18m915vq _o5724jg8 _1e0ccj1k _1bto1l2s _1nmz1hna _sudp1e54",
  dropdownItemGroupStyles: "_14hp1wdt _6pup1kw7 _1eo073ad",
  openIssueInJiraStyles: "_11c8fhey _bfhk1j28 _1bah1e5h _1e0c1kw7 _syaz13af _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l312zz"
};
const LozengeActionError = ({
  errorMessage,
  testId,
  maxLineNumber = MAX_LINE_NUMBER,
  invokePreviewAction
}) => {
  const {
    fireEvent
  } = useAnalyticsEvents();
  const invoke = useInvokeClientAction({});
  const isPreviewAvailable = invokePreviewAction !== undefined;
  const handlePreviewOpen = useCallback(() => {
    if (isPreviewAvailable) {
      fireEvent('ui.button.clicked.smartLinkStatusOpenPreview', {});
      if (invokePreviewAction) {
        invoke(invokePreviewAction);
      }
    }
  }, [isPreviewAvailable, invoke, invokePreviewAction, fireEvent]);
  const dynamicCss = null;
  const content = useMemo(() => {
    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: ax([styles.contentStyles])
    }, /*#__PURE__*/React.createElement(ErrorIcon, {
      testId: `${testId}-icon`,
      color: "var(--ds-icon-danger, #C9372C)",
      label: 'error',
      spacing: "spacious"
    }), /*#__PURE__*/React.createElement("span", {
      "data-testid": `${testId}-error-message`,
      className: ax([styles.textStylesBase, "_1yyj1n6p _102k16q4"]),
      style: {
        "--_t4prqe": ix(maxLineNumber)
      }
    }, typeof errorMessage === 'string' ? errorMessage : getFormattedMessage(errorMessage))), isPreviewAvailable ? /*#__PURE__*/React.createElement("div", {
      className: ax([styles.linkStyles])
    }, /*#__PURE__*/React.createElement(Pressable, {
      testId: `${testId}-open-embed`,
      onClick: handlePreviewOpen,
      xcss: styles.openIssueInJiraStyles
    }, fg('confluence-issue-terminology-refresh') ? /*#__PURE__*/React.createElement(FormattedMessage, messages.open_issue_in_jiraIssueTermRefresh) : /*#__PURE__*/React.createElement(FormattedMessage, messages.open_issue_in_jira))) : null);
  }, [errorMessage, handlePreviewOpen, isPreviewAvailable, testId, dynamicCss]);
  return /*#__PURE__*/React.createElement("span", {
    "data-testid": `${testId}-error-item-group`,
    className: ax([styles.dropdownItemGroupStyles])
  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
    testId: `${testId}-error`
  }, content)));
};
export default LozengeActionError;