import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _excluded = ["type"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
 * @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 { contentWrapper, extensionContent, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
var hoverStyles = css({
  '&:hover': {
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
  }
});
var containerStyle = css({
  containerType: 'inline-size'
});
function ExtensionWithPluginState(props) {
  var _node$attrs;
  var node = props.node,
    handleContentDOMRef = props.handleContentDOMRef,
    children = props.children,
    widthState = props.widthState,
    handleRef = props.handleRef,
    shadowClassNames = props.shadowClassNames,
    hideFrame = props.hideFrame,
    editorAppearance = props.editorAppearance,
    macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
    isNodeSelected = props.isNodeSelected,
    isNodeHovered = props.isNodeHovered,
    isNodeNested = props.isNodeNested,
    setIsNodeHovered = props.setIsNodeHovered,
    showLivePagesBodiedMacrosRendererView = props.showLivePagesBodiedMacrosRendererView,
    showUpdatedLivePages1PBodiedExtensionUI = props.showUpdatedLivePages1PBodiedExtensionUI,
    showBodiedExtensionRendererView = props.showBodiedExtensionRendererView,
    setShowBodiedExtensionRendererView = props.setShowBodiedExtensionRendererView,
    pluginInjectionApi = props.pluginInjectionApi,
    isLivePageViewMode = props.isLivePageViewMode;
  var _ref = macroInteractionDesignFeatureFlags || {},
    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
  var isLegacyContentMacroExtension = function 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';
  };
  var showLegacyContentHeader = fg('platform_editor_legacy_content_macro_visual_update') && isLegacyContentMacroExtension(node);
  var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
  var hasChildren = !!children;
  var 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
  var macroParamHiddenValue = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 || (_node$attrs = _node$attrs.parameters) === null || _node$attrs === void 0 || (_node$attrs = _node$attrs.macroParams) === null || _node$attrs === void 0 || (_node$attrs = _node$attrs.hidden) === null || _node$attrs === void 0 ? void 0 : _node$attrs.value;
  var shouldHideInLivePageViewMode = isLivePageViewMode && macroParamHiddenValue === 'true'; // it is stored as a string

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

  // We don't want to show border for non-empty 1p bodied extensions in live pages
  var show1PBodiedExtensionBorder = showUpdatedLivePages1PBodiedExtensionUI ? isEmptyBodiedMacro(node) : true;
  var classNames = classnames('extension-container', 'block', shadowClassNames, _defineProperty({
    '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));
  var 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
  });
  var headerClassNames = classnames({
    'with-children': hasChildren,
    'without-frame': removeBorder
  });
  var newContentClassNames = classnames({
    'with-padding-styles': showMacroInteractionDesignUpdates,
    'with-bodied-padding-styles': hasBody && showMacroInteractionDesignUpdates
  });
  var contentClassNames = classnames('extension-content', 'block', {
    'remove-border': showMacroInteractionDesignUpdates,
    'hide-content': showBodiedExtensionRendererView
  });
  var customContainerStyles = {
    width: '100%'
  };
  var newContentStyles = {};
  if (shouldBreakout) {
    // type is destructured so that breakout styles does not include it
    var _calculateBreakoutSty = calculateBreakoutStyles({
        mode: node.attrs.layout,
        widthStateWidth: widthState.width,
        widthStateLineLength: widthState.lineLength
      }),
      _type = _calculateBreakoutSty.type,
      breakoutStyles = _objectWithoutProperties(_calculateBreakoutSty, _excluded);
    newContentStyles = _objectSpread({}, breakoutStyles);
    customContainerStyles = breakoutStyles;
  }
  newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), contentWrapper);
  var handleMouseEvent = function handleMouseEvent(didHover) {
    if (setIsNodeHovered) {
      setIsNodeHovered(didHover);
    }
  };
  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: function onMouseEnter() {
      return 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) ? function () {} : undefined,
    onMouseLeave: function onMouseLeave() {
      return handleMouseEvent(false);
    },
    onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : 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: extensionContent
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: contentClassNames
  }, jsx("div", {
    ref: handleContentDOMRef
  }))))));
}
var Extension = function Extension(props) {
  var pluginInjectionApi = props.pluginInjectionApi;
  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['width'], function (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
      };
    }),
    lineLength = _useSharedPluginState.lineLength,
    width = _useSharedPluginState.width;
  var memoizedWidthState = React.useMemo(function () {
    return {
      width: width !== null && width !== void 0 ? width : 0,
      lineLength: lineLength
    };
  }, [width, lineLength]);
  var widthState = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedWidthState : {
    width: width !== null && width !== void 0 ? width : 0,
    lineLength: lineLength
  };

  // Ignored via go/ees005
  return jsx(ExtensionWithPluginState, _extends({
    widthState: widthState
    // eslint-disable-next-line react/jsx-props-no-spreading
  }, props));
};
var _default_1 = overflowShadow(Extension, {
  overflowSelector: '.extension-overflow-wrapper'
});
export default _default_1;