import _extends from "@babel/runtime/helpers/extends";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

import React, { Fragment } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import classnames from 'classnames';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { useSharedPluginStateWithSelector } from '../../../hooks';
import { overflowShadow } from '../../../ui';
import { calculateBreakoutStyles } from '../../../utils';
import { shouldExtensionBreakout } from '../../utils/should-extension-breakout';
import ExtensionLozenge from '../Lozenge';
import { overlay } from '../styles';
import { isEmptyBodiedMacro } from './extension-utils';
import { content, contentWrapper, extensionContent, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
const hoverStyles = css({
  '&:hover': {
    boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8C8F97)"}`
  }
});
const containerStyle = css({
  containerType: 'inline-size'
});
function ExtensionWithPluginState(props) {
  var _node$attrs, _node$attrs$parameter, _node$attrs$parameter2, _node$attrs$parameter3;
  const {
    node,
    handleContentDOMRef,
    children,
    widthState,
    handleRef,
    shadowClassNames,
    hideFrame,
    editorAppearance,
    macroInteractionDesignFeatureFlags,
    isNodeSelected,
    isNodeHovered,
    isNodeNested,
    setIsNodeHovered,
    showLivePagesBodiedMacrosRendererView,
    showUpdatedLivePages1PBodiedExtensionUI,
    showBodiedExtensionRendererView,
    setShowBodiedExtensionRendererView,
    pluginInjectionApi,
    isLivePageViewMode
  } = props;
  const {
    showMacroInteractionDesignUpdates
  } = macroInteractionDesignFeatureFlags || {};
  const isLegacyContentMacroExtension = extensionNode => {
    var _extensionNode$attrs, _extensionNode$attrs2;
    return extensionNode.type.name === 'extension' && ((_extensionNode$attrs = extensionNode.attrs) === null || _extensionNode$attrs === void 0 ? void 0 : _extensionNode$attrs.extensionType) === 'com.atlassian.confluence.migration' && ((_extensionNode$attrs2 = extensionNode.attrs) === null || _extensionNode$attrs2 === void 0 ? void 0 : _extensionNode$attrs2.extensionKey) === 'legacy-content';
  };
  const showLegacyContentHeader = fg('platform_editor_legacy_content_macro_visual_update') && isLegacyContentMacroExtension(node);
  const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
  const hasChildren = !!children;
  const removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !hasBody);

  // Some native bodied macros (e.g Content properties) have this param to hide in view mode
  // which we want to also hide in live page view mode too
  const macroParamHiddenValue = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : (_node$attrs$parameter = _node$attrs.parameters) === null || _node$attrs$parameter === void 0 ? void 0 : (_node$attrs$parameter2 = _node$attrs$parameter.macroParams) === null || _node$attrs$parameter2 === void 0 ? void 0 : (_node$attrs$parameter3 = _node$attrs$parameter2.hidden) === null || _node$attrs$parameter3 === void 0 ? void 0 : _node$attrs$parameter3.value;
  const shouldHideInLivePageViewMode = isLivePageViewMode && macroParamHiddenValue === 'true'; // it is stored as a string

  const {
    getPos,
    view
  } = props;
  const isTopLevelNode = React.useMemo(() => {
    const pos = typeof getPos === 'function' ? getPos() : undefined;
    return typeof pos !== 'undefined' && !isNaN(pos) && view.state.doc.resolve(pos).depth === 0;
  }, [view, getPos]);
  const layout = node.attrs.layout;
  const legacyShouldBreakout = ['full-width', 'wide'].includes(layout) && isTopLevelNode && editorAppearance !== 'full-width';
  const tinymceFullWidthModeEnabled = expValEquals('confluence_max_width_content_appearance', 'isEnabled', true);
  const breakoutExtensionFixEnabled = expValEquals('confluence_max_width_breakout_extension_fix', 'isEnabled', true);
  const shouldUseBreakoutFix = tinymceFullWidthModeEnabled && breakoutExtensionFixEnabled;
  const shouldBreakout = shouldUseBreakoutFix ? shouldExtensionBreakout({
    layout,
    isTopLevelNode,
    editorAppearance
  }) : legacyShouldBreakout;

  // We don't want to show border for non-empty 1p bodied extensions in live pages
  const show1PBodiedExtensionBorder = showUpdatedLivePages1PBodiedExtensionUI ? isEmptyBodiedMacro(node) : true;
  const classNames = classnames('extension-container', 'block', shadowClassNames, {
    'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
    'with-bodied-border': showMacroInteractionDesignUpdates && (hasBody || isLegacyContentMacroExtension(node)) && !showBodiedExtensionRendererView && show1PBodiedExtensionBorder,
    'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
    'with-hover-border': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : showMacroInteractionDesignUpdates && isNodeHovered,
    'with-danger-overlay': showMacroInteractionDesignUpdates,
    'without-frame': removeBorder,
    [widerLayoutClassName]: shouldBreakout
  });
  const overflowClassNames = classnames('extension-overflow-wrapper', {
    'with-body': hasBody,
    'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
    // Adding extra padding for renderer view so users can have a touch target to click on the extension
    'with-padding-styles': showMacroInteractionDesignUpdates && showBodiedExtensionRendererView
  });
  const headerClassNames = classnames({
    'with-children': hasChildren,
    'without-frame': removeBorder
  });
  const newContentClassNames = classnames({
    'with-padding-styles': showMacroInteractionDesignUpdates,
    'with-bodied-padding-styles': hasBody && showMacroInteractionDesignUpdates
  });
  const contentClassNames = classnames('extension-content', 'block', {
    'remove-border': showMacroInteractionDesignUpdates,
    'hide-content': showBodiedExtensionRendererView
  });
  let customContainerStyles = {
    width: '100%'
  };
  let newContentStyles = {};
  if (shouldBreakout) {
    // type is destructured so that breakout styles does not include it
    const {
      type: _type,
      ...breakoutStyles
    } = calculateBreakoutStyles({
      mode: node.attrs.layout,
      widthStateWidth: widthState.width,
      widthStateLineLength: widthState.lineLength
    });
    newContentStyles = {
      ...breakoutStyles
    };
    customContainerStyles = breakoutStyles;
  }
  newContentStyles = {
    ...newContentStyles,
    ...contentWrapper
  };
  const handleMouseEvent = didHover => {
    if (setIsNodeHovered) {
      setIsNodeHovered(didHover);
    }
  };
  const extensionContentStyles = expValEquals('platform_editor_extension_styles', 'isEnabled', true) ? extensionContent : content;
  return jsx(Fragment, null, !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
    isNodeSelected: isNodeSelected,
    isNodeHovered: isNodeHovered,
    isNodeNested: isNodeNested,
    node: node,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
    customContainerStyles: customContainerStyles,
    setIsNodeHovered: setIsNodeHovered,
    isBodiedMacro: hasBody || isLegacyContentMacroExtension(node),
    showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
    showUpdatedLivePages1PBodiedExtensionUI: showUpdatedLivePages1PBodiedExtensionUI,
    showBodiedExtensionRendererView: showBodiedExtensionRendererView,
    setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView,
    pluginInjectionApi: pluginInjectionApi
  }), jsx("div", {
    "data-testid": "extension-container",
    ref: handleRef,
    "data-layout": node.attrs.layout
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: classNames,
    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
    wrapperStyleInheritedCursor, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: customContainerStyles,
    onMouseEnter: () => handleMouseEvent(true)
    // @atlassian/a11y/mouse-events-have-key-events: hover border is also applied via .ak-editor-selected-node
    // CSS on keyboard selection. No-ops here satisfy the rule without duplicating state updates.
    ,
    onFocus: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined,
    onMouseLeave: () => handleMouseEvent(false),
    onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined
  }, jsx("div", {
    "data-testid": "extension-overflow-wrapper"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    ,
    className: overflowClassNames,
    css: [
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
    overflowWrapperStyles, fg('platform_fix_macro_renders_in_layouts') && containerStyle]
  }, jsx("div", {
    className: 'extension-overlay',
    css: overlay
  }), jsx("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    css: header,
    contentEditable: false
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: headerClassNames
  }, !removeBorder && jsx(ExtensionLozenge, {
    isNodeSelected: isNodeSelected,
    node: node,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
    pluginInjectionApi: pluginInjectionApi
  }), children), hasBody &&
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
  jsx("div", {
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
    css: newContentStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
    ,
    className: newContentClassNames,
    "data-testid": "extension-new-content"
  }, !shouldHideInLivePageViewMode && jsx("div", {
    "data-testid": "extension-content"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    ,
    css: extensionContentStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: contentClassNames
  }, jsx("div", {
    ref: handleContentDOMRef
  }))))));
}
const Extension = props => {
  const {
    pluginInjectionApi
  } = props;
  const {
    lineLength,
    width
  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['width'], states => {
    var _states$widthState$wi, _states$widthState, _states$widthState2;
    return {
      width: (_states$widthState$wi = (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width) !== null && _states$widthState$wi !== void 0 ? _states$widthState$wi : 0,
      lineLength: (_states$widthState2 = states.widthState) === null || _states$widthState2 === void 0 ? void 0 : _states$widthState2.lineLength
    };
  });

  // Ignored via go/ees005
  return jsx(ExtensionWithPluginState
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
  , _extends({
    widthState: {
      width: width !== null && width !== void 0 ? width : 0,
      lineLength
    }
    // eslint-disable-next-line react/jsx-props-no-spreading
  }, props));
};
const _default_1 = overflowShadow(Extension, {
  overflowSelector: '.extension-overflow-wrapper'
});
export default _default_1;