/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { useCallback, 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 { injectIntl } from 'react-intl';
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import QuestionsIcon from '@atlaskit/icon/core/question-circle';
import Tooltip from '@atlaskit/tooltip';
import { ACTION_SUBJECT_ID } from '../../analytics';
import { unsupportedContentMessages } from '../../messages/unsupportedContent';
import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
import { getUnsupportedContent } from '../unsupported-content-helper';
const inlineNodeStyle = css({
  alignItems: 'center',
  background: "var(--ds-background-disabled, #17171708)",
  border: `${"var(--ds-border-width, 1px)"} dashed ${"var(--ds-border-disabled, #0515240F)"}`,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  borderRadius: "var(--ds-radius-small, 3px)",
  boxSizing: 'border-box',
  cursor: 'default',
  display: 'inline-flex',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  fontSize: relativeFontSizeToBase16(14),
  margin: `0 ${"var(--ds-space-025, 2px)"}`,
  minHeight: '24px',
  padding: `0 ${"var(--ds-space-100, 8px)"}`,
  verticalAlign: 'middle',
  whiteSpace: 'nowrap'
});
const UnsupportedInlineNode = ({
  node,
  intl,
  dispatchAnalyticsEvent
}) => {
  const message = getUnsupportedContent(unsupportedContentMessages.unsupportedInlineContent, 'Unsupported', node, intl);
  const tooltipContent = intl.formatMessage(unsupportedContentMessages.unsupportedContentTooltip);
  const {
    current: style
  } = useRef({
    padding: '4px'
  });
  const originalNodeType = node === null || node === void 0 ? void 0 : node.attrs.originalValue.type;
  const tooltipOnShowHandler = useCallback(() => dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_INLINE, originalNodeType), [dispatchAnalyticsEvent, originalNodeType]);
  return jsx("span", {
    css: inlineNodeStyle
  }, message, jsx(Tooltip, {
    content: tooltipContent,
    hideTooltipOnClick: false,
    position: "bottom",
    onShow: tooltipOnShowHandler,
    strategy: "absolute"
  }, jsx("span", {
    style: style
  }, jsx(QuestionsIcon, {
    label: "?"
  }))));
};

// eslint-disable-next-line @typescript-eslint/ban-types
const _default_1 = injectIntl(UnsupportedInlineNode);
export default _default_1;