"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _classnames2 = _interopRequireDefault(require("classnames"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _hooks = require("../../../hooks");
var _ui = require("../../../ui");
var _utils = require("../../../utils");
var _shouldExtensionBreakout = require("../../utils/should-extension-breakout");
var _Lozenge = _interopRequireDefault(require("../Lozenge"));
var _styles = require("../styles");
var _extensionUtils = require("./extension-utils");
var _styles2 = require("./styles");
var _excluded = ["type"];
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2.default)(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; }
var hoverStyles = (0, _react2.css)({
  '&:hover': {
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
  }
});
var containerStyle = (0, _react2.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 = (0, _platformFeatureFlags.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.default.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 = (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true);
  var breakoutExtensionFixEnabled = (0, _expValEquals.expValEquals)('confluence_max_width_breakout_extension_fix', 'isEnabled', true);
  var shouldUseBreakoutFix = tinymceFullWidthModeEnabled && breakoutExtensionFixEnabled;
  var shouldBreakout = shouldUseBreakoutFix ? (0, _shouldExtensionBreakout.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 ? (0, _extensionUtils.isEmptyBodiedMacro)(node) : true;
  var classNames = (0, _classnames2.default)('extension-container', 'block', shadowClassNames, (0, _defineProperty2.default)({
    'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
    'with-bodied-border': showMacroInteractionDesignUpdates && (hasBody || isLegacyContentMacroExtension(node)) && !showBodiedExtensionRendererView && show1PBodiedExtensionBorder,
    'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested && !showBodiedExtensionRendererView,
    'with-hover-border': (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : showMacroInteractionDesignUpdates && isNodeHovered,
    'with-danger-overlay': showMacroInteractionDesignUpdates,
    'without-frame': removeBorder
  }, _styles2.widerLayoutClassName, shouldBreakout));
  var overflowClassNames = (0, _classnames2.default)('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 = (0, _classnames2.default)({
    'with-children': hasChildren,
    'without-frame': removeBorder
  });
  var newContentClassNames = (0, _classnames2.default)({
    'with-padding-styles': showMacroInteractionDesignUpdates,
    'with-bodied-padding-styles': hasBody && showMacroInteractionDesignUpdates
  });
  var contentClassNames = (0, _classnames2.default)('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 = (0, _utils.calculateBreakoutStyles)({
        mode: node.attrs.layout,
        widthStateWidth: widthState.width,
        widthStateLineLength: widthState.lineLength
      }),
      _type = _calculateBreakoutSty.type,
      breakoutStyles = (0, _objectWithoutProperties2.default)(_calculateBreakoutSty, _excluded);
    newContentStyles = _objectSpread({}, breakoutStyles);
    customContainerStyles = breakoutStyles;
  }
  newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), _styles2.contentWrapper);
  var handleMouseEvent = function handleMouseEvent(didHover) {
    if (setIsNodeHovered) {
      setIsNodeHovered(didHover);
    }
  };
  return (0, _react2.jsx)(_react.Fragment, null, !showLegacyContentHeader && showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _react2.jsx)(_Lozenge.default, {
    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
  }), (0, _react2.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
    _styles2.wrapperStyleInheritedCursor, showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _expValEquals.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: (0, _expValEquals.expValEquals)('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined,
    onMouseLeave: function onMouseLeave() {
      return handleMouseEvent(false);
    },
    onBlur: (0, _expValEquals.expValEquals)('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined
  }, (0, _react2.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
    _styles2.overflowWrapperStyles, (0, _platformFeatureFlags.fg)('platform_fix_macro_renders_in_layouts') && containerStyle]
  }, (0, _react2.jsx)("div", {
    className: 'extension-overlay',
    css: _styles.overlay
  }), (0, _react2.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: _styles2.header,
    contentEditable: false
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: headerClassNames
  }, !removeBorder && (0, _react2.jsx)(_Lozenge.default, {
    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
  (0, _react2.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 && (0, _react2.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: _styles2.extensionContent
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: contentClassNames
  }, (0, _react2.jsx)("div", {
    ref: handleContentDOMRef
  }))))));
}
var Extension = function Extension(props) {
  var pluginInjectionApi = props.pluginInjectionApi;
  var _useSharedPluginState = (0, _hooks.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.default.useMemo(function () {
    return {
      width: width !== null && width !== void 0 ? width : 0,
      lineLength: lineLength
    };
  }, [width, lineLength]);
  var widthState = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedWidthState : {
    width: width !== null && width !== void 0 ? width : 0,
    lineLength: lineLength
  };

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