import _extends from "@babel/runtime/helpers/extends";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useMemo } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
import classnames from 'classnames';
import { FormattedMessage, defineMessages } from 'react-intl';
import CustomizeIcon from '@atlaskit/icon/core/customize';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, xcss } from '@atlaskit/primitives';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import Tooltip from '@atlaskit/tooltip';
const containerStyles = css({
  textAlign: 'left',
  zIndex: 1,
  position: 'relative',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.bodied': {
    marginTop: "var(--ds-space-300, 24px)"
  }
});
const showLabelStyles = css({
  opacity: 1
});
const hideLabelStyles = css({
  opacity: 0
});
const labelStyles = css({
  opacity: 0,
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  lineHeight: 1,
  display: 'inline-flex',
  justifyContent: 'left',
  position: 'absolute',
  width: 'max-content',
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
  top: '-28px',
  // When updating this value, make sure to also update the value in EditToggle.tsx, buttonContainerStyles
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.show-label': {
    cursor: 'pointer',
    opacity: 1
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.nested': {
    // Need to add indent if the node is nested since we removed previous indentation styles to make it fit properly
    // in the nested component
    marginLeft: "var(--ds-space-150, 12px)"
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.inline': {
    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
    top: '-27px'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.bodied-background': {
    background: "var(--ds-surface, #FFFFFF)"
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.bodied-border': {
    boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`
  },
  minHeight: "var(--ds-space-300, 24px)",
  alignItems: 'center',
  borderRadius: "var(--ds-radius-small, 3px)",
  paddingLeft: "var(--ds-space-100, 8px)",
  paddingRight: "var(--ds-space-100, 8px)",
  color: "var(--ds-text-subtle, #505258)",
  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.remove-left-margin': {
    marginLeft: "var(--ds-space-negative-150, -12px)"
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.remove-nested-left-margin': {
    marginLeft: 0
  },
  font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.with-bodied-macro-live-page-styles': {
    backgroundColor: "var(--ds-background-input, #FFFFFF)",
    boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`
  }
});
const spacerStyles = xcss({
  height: 'space.200',
  position: 'absolute',
  width: '100%'
});
const iconStyles = css({
  marginLeft: "var(--ds-space-075, 6px)",
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.hide-icon': {
    display: 'none'
  }
});
const bodiedMacroIconStyles = css({
  display: 'none'
});
const i18n = defineMessages({
  configure: {
    id: 'editor-common-extensibility.macro.button.configure',
    defaultMessage: 'Configure {macroName}',
    description: 'Text in tooltip that tells user they can configure the specific macro.'
  }
});
export const getShouldShowBodiedMacroLabel = (isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI) => {
  // Bodied macros show the label by default except for the new live pages 1P bodied macro experience where we only show it on hover
  if (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) {
    return isNodeHovered;
  }
  if (!showLivePagesBodiedMacrosRendererView) {
    return true;
  } // Keep showing labels as usual for default experience for bodied macros
  return !!(isNodeHovered && !showBodiedExtensionRendererView); // For the new live pages bodied macro experience, we only show the label on hover in the "edit" view
};
export const ExtensionLabel = ({
  text,
  extensionName,
  customContainerStyles,
  isNodeNested,
  setIsNodeHovered,
  isBodiedMacro,
  showUpdatedLivePages1PBodiedExtensionUI,
  showLivePagesBodiedMacrosRendererView,
  showBodiedExtensionRendererView,
  pluginInjectionApi: _pluginInjectionApi
}) => {
  const isInlineExtension = extensionName === 'inlineExtension';
  const showDefaultBodiedStyles = isBodiedMacro;
  const containerClassNames = classnames({
    bodied: isBodiedMacro
  });
  const labelClassNames = classnames('extension-label', {
    nested: isNodeNested,
    inline: isInlineExtension,
    bodied: isBodiedMacro,
    'bodied-border': showDefaultBodiedStyles,
    'bodied-background': showDefaultBodiedStyles,
    'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
    'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
    // Need this separate class since we don't ever want to show the label during view mode
    'remove-left-margin': !isBodiedMacro && !isInlineExtension && !isNodeNested,
    'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
  });
  const iconClassNames = classnames({
    'extension-icon': true
  });
  const memoizedTooltipValues = useMemo(() => ({
    macroName: text
  }), [text]);
  const tooltipValues = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedTooltipValues : {
    macroName: text
  };
  return (
    // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions, @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable
    jsx("div", {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      css: containerStyles
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: containerClassNames
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      ,
      style: customContainerStyles,
      onMouseOver: () => {
        setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
      }
      // @atlassian/a11y/mouse-events-have-key-events: label visibility on keyboard focus is already
      // handled via the .ak-editor-selected-node CSS class applied by ProseMirror on node selection.
      // No-ops here satisfy the rule.
      ,
      onFocus: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined,
      onMouseLeave: () => {
        setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
      },
      onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined,
      "data-testid": "new-lozenge-container",
      contentEditable: false
    }, jsx(Tooltip, {
      content: jsx(FormattedMessage
      // Ignored via go/ees005
      // eslint-disable-next-line react/jsx-props-no-spreading
      , _extends({}, i18n.configure, {
        values: tooltipValues
      })),
      position: "top"
    }, tooltipProps => jsx("span", _extends({
      "data-testid": "new-lozenge-button"
      // Ignored via go/ees005
      // eslint-disable-next-line react/jsx-props-no-spreading
    }, tooltipProps, {
      css: [labelStyles, !showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles]
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: labelClassNames
    }), text, jsx("span", {
      css: [iconStyles, isBodiedMacro && bodiedMacroIconStyles]
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: iconClassNames,
      "data-testid": "config-icon"
    }, jsx(CustomizeIcon, {
      label: ""
    })))), jsx(Box, {
      xcss: spacerStyles
    }))
  );
};