/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { Fragment } 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 { akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { useSharedPluginStateWithSelector } from '../../../hooks';
import { createWidthContext, WidthContext } from '../../../ui';
import ExtensionLozenge from '../Lozenge';
import { overlay } from '../styles';
import { wrapperStyle } from './styles';
var inlineWrapperStyles = css({
  maxWidth: '100%',
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  'tr &': {
    maxWidth: 'inherit'
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '.rich-media-item': {
    maxWidth: '100%'
  }
});
var hoverStyles = css({
  '&:hover': {
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
  }
});
var InlineExtension = function InlineExtension(props) {
  var node = props.node,
    pluginInjectionApi = props.pluginInjectionApi,
    macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
    isNodeSelected = props.isNodeSelected,
    children = props.children,
    isNodeHovered = props.isNodeHovered,
    setIsNodeHovered = props.setIsNodeHovered,
    isLivePageViewMode = props.isLivePageViewMode;
  var _ref = macroInteractionDesignFeatureFlags || {},
    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['width'], function (states) {
      var _states$widthState;
      return {
        width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width
      };
    }),
    width = _useSharedPluginState.width;
  var hasChildren = !!children;
  var classNames = classnames('extension-container', 'inline', {
    'with-overlay': !showMacroInteractionDesignUpdates,
    'with-children': hasChildren,
    'with-danger-overlay': showMacroInteractionDesignUpdates,
    'with-hover-border': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : showMacroInteractionDesignUpdates && isNodeHovered
  });
  var rendererContainerWidth = 0;
  if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
    exposure: true
  })) {
    if (width) {
      var padding = width > akEditorFullPageNarrowBreakout ? akEditorGutterPaddingDynamic() : akEditorGutterPaddingReduced;
      rendererContainerWidth = width - padding * 2;
    }
  } else {
    rendererContainerWidth = width ? width - akEditorGutterPaddingDynamic() * 2 : 0;
  }
  var handleMouseEvent = function handleMouseEvent(didHover) {
    if (setIsNodeHovered) {
      setIsNodeHovered(didHover);
    }
  };
  var inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
    node: node,
    isNodeSelected: isNodeSelected,
    isNodeHovered: isNodeHovered,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
    setIsNodeHovered: setIsNodeHovered,
    pluginInjectionApi: pluginInjectionApi
  }), jsx("div", {
    "data-testid": "inline-extension-wrapper",
    css: [
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    wrapperStyle, inlineWrapperStyles, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: classNames,
    onMouseEnter: function onMouseEnter() {
      return handleMouseEvent(true);
    }
    // @atlassian/a11y/mouse-events-have-key-events: hover border is also accessible via keyboard selection.
    // No-ops here satisfy the rule without duplicating state updates.
    ,
    onFocus: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined,
    onMouseLeave: function onMouseLeave() {
      return handleMouseEvent(false);
    },
    onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined
  }, jsx("div", {
    css: overlay,
    className: "extension-overlay"
  }), children ? children : jsx(ExtensionLozenge, {
    node: node,
    isNodeSelected: isNodeSelected,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
    pluginInjectionApi: pluginInjectionApi
  })));
  return jsx(WidthContext.Provider, {
    value: createWidthContext(rendererContainerWidth)
  }, inlineExtensionInternal);
};
export default InlineExtension;