"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 _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
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 _classnames = _interopRequireDefault(require("classnames"));
var _file = _interopRequireDefault(require("@atlaskit/icon/core/file"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _hooks = require("../../hooks");
var _MultiBodiedExtension = require("../../ui/MultiBodiedExtension");
var _utils = require("../../utils");
var _Lozenge = _interopRequireDefault(require("../Extension/Lozenge"));
var _shouldExtensionBreakout = require("../utils/should-extension-breakout");
var _actionApi = require("./action-api");
var _styles = require("./styles");
var _excluded = ["url"];
/* eslint-disable @atlaskit/design-system/prefer-primitives */
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// 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
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); }
var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
  return (
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    (0, _react2.css)(_MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, (0, _defineProperty2.default)({}, ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    , ")"), (0, _react2.css)(
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.extensionFrameContent,
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    showMacroInteractionDesignUpdates && _MultiBodiedExtension.removeMarginsAndBorder)))
  );
};
var imageStyles = (0, _react2.css)({
  maxHeight: '24px',
  maxWidth: '24px'
});
var hoverStyles = (0, _react2.css)({
  '&:hover': {
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
  }
});
var MultiBodiedExtensionFrames = function MultiBodiedExtensionFrames(_ref) {
  var articleRef = _ref.articleRef;
  return (0, _react2.jsx)("article", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: "multiBodiedExtension--frames",
    "data-testid": "multiBodiedExtension--frames",
    "data-multibodiedextension-frames": true,
    ref: articleRef
  });
};

// Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates) {
  if (showMacroInteractionDesignUpdates) {
    return null;
  }
  if (imageData) {
    var url = imageData.url,
      rest = (0, _objectWithoutProperties2.default)(imageData, _excluded);
    return (
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      (0, _react2.jsx)("div", {
        className: "extension-title"
      }, (0, _react2.jsx)("img", (0, _extends2.default)({
        css: imageStyles,
        src: url
        // Ignored via go/ees005
        // eslint-disable-next-line react/jsx-props-no-spreading
      }, rest, {
        alt: title
      })), title)
    );
  }
  return (0, _react2.jsx)("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: "extension-title",
    "data-testid": 'multiBodiedExtension-default-lozenge'
  }, (0, _react2.jsx)(_file.default, {
    label: title
  }), title);
};
var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref2) {
  var node = _ref2.node,
    handleContentDOMRef = _ref2.handleContentDOMRef,
    getPos = _ref2.getPos,
    tryExtensionHandler = _ref2.tryExtensionHandler,
    editorView = _ref2.editorView,
    eventDispatcher = _ref2.eventDispatcher,
    widthState = _ref2.widthState,
    editorAppearance = _ref2.editorAppearance,
    macroInteractionDesignFeatureFlags = _ref2.macroInteractionDesignFeatureFlags,
    isNodeSelected = _ref2.isNodeSelected,
    isNodeHovered = _ref2.isNodeHovered,
    isNodeNested = _ref2.isNodeNested,
    setIsNodeHovered = _ref2.setIsNodeHovered,
    pluginInjectionApi = _ref2.pluginInjectionApi,
    isLivePageViewMode = _ref2.isLivePageViewMode,
    _ref2$allowBodiedOver = _ref2.allowBodiedOverride,
    allowBodiedOverride = _ref2$allowBodiedOver === void 0 ? false : _ref2$allowBodiedOver;
  var _ref3 = macroInteractionDesignFeatureFlags || {},
    showMacroInteractionDesignUpdates = _ref3.showMacroInteractionDesignUpdates;
  var _node$attrs = node.attrs,
    parameters = _node$attrs.parameters,
    extensionKey = _node$attrs.extensionKey;
  var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey || node.type.name;
  var imageData = (0, _utils.getExtensionLozengeData)({
    node: node,
    type: 'image'
  });
  var _useState = (0, _react.useState)(0),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    activeChildIndex = _useState2[0],
    setActiveChildIndex = _useState2[1];
  // Adding to avoid aliasing `this` for the callbacks
  var updateActiveChild = _react.default.useCallback(function (index) {
    if (typeof index !== 'number') {
      setActiveChildIndex(0);
      throw new Error('Index is not valid');
    }
    setActiveChildIndex(index);
    return true;
  }, [setActiveChildIndex]);
  var articleRef = _react.default.useCallback(function (node) {
    return handleContentDOMRef(node);
  }, [handleContentDOMRef]);
  var childrenContainer = _react.default.useMemo(function () {
    return (0, _react2.jsx)(MultiBodiedExtensionFrames, {
      articleRef: articleRef
    });
  }, [articleRef]);
  var actions = (0, _actionApi.useMultiBodiedExtensionActions)({
    updateActiveChild: updateActiveChild,
    editorView: editorView,
    getPos: getPos,
    node: node,
    eventDispatcher: eventDispatcher,
    allowBodiedOverride: allowBodiedOverride,
    childrenContainer: childrenContainer
  });
  var extensionHandlerResult = _react.default.useMemo(function () {
    return tryExtensionHandler(actions);
  }, [tryExtensionHandler, actions]);
  var layout = node.attrs.layout;
  var legacyShouldBreakout = ['full-width', 'wide'].includes(layout) && 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,
    editorAppearance: editorAppearance,
    isTopLevelNode: true
  }) : legacyShouldBreakout;
  var mbeWrapperStyles = {};
  if (shouldBreakout) {
    var _calculateBreakoutSty = (0, _utils.calculateBreakoutStyles)({
        mode: node.attrs.layout,
        widthStateLineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
        widthStateWidth: widthState === null || widthState === void 0 ? void 0 : widthState.width
      }),
      breakoutStyles = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_calculateBreakoutSty), _calculateBreakoutSty));
    mbeWrapperStyles = breakoutStyles;
  }
  var wrapperClassNames = (0, _classnames.default)('multiBodiedExtension--wrapper', 'extension-container', 'block', {
    'with-border': showMacroInteractionDesignUpdates,
    'with-danger-overlay': showMacroInteractionDesignUpdates,
    'with-padding-background-styles': showMacroInteractionDesignUpdates,
    'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
  });
  var containerClassNames = (0, _classnames.default)('multiBodiedExtension--container', {
    'remove-padding': showMacroInteractionDesignUpdates
  });
  var bodyContainerClassNames = (0, _classnames.default)('multiBodiedExtension--body-container');
  var navigationClassNames = (0, _classnames.default)('multiBodiedExtension--navigation', {
    'remove-margins': showMacroInteractionDesignUpdates,
    'remove-border': showMacroInteractionDesignUpdates
  });
  var overlayClassNames = (0, _classnames.default)('multiBodiedExtension--overlay', {
    'with-margin': showMacroInteractionDesignUpdates
  });
  var handleMouseEvent = function handleMouseEvent(didHover) {
    if (setIsNodeHovered) {
      setIsNodeHovered(didHover);
    }
  };
  return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && (0, _react2.jsx)(_Lozenge.default, {
    isNodeSelected: isNodeSelected,
    node: node,
    showMacroInteractionDesignUpdates: true,
    customContainerStyles: mbeWrapperStyles,
    isNodeHovered: isNodeHovered,
    isNodeNested: isNodeNested,
    setIsNodeHovered: setIsNodeHovered,
    isBodiedMacro: true,
    pluginInjectionApi: pluginInjectionApi
  }), (0, _react2.jsx)("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: wrapperClassNames,
    css: [/* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */
    (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? _styles.mbeExtensionWrapperCSSStyles : _styles.mbeExtensionWrapperCSSStylesOld, /* eslint-enable @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage */
    showMacroInteractionDesignUpdates && !isLivePageViewMode && hoverStyles],
    "data-testid": "multiBodiedExtension--wrapper-editor",
    "data-layout": node.attrs.layout
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: mbeWrapperStyles,
    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", {
    // 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: (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? _styles.overlayStyles : _styles.overlayStylesOld
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: overlayClassNames,
    "data-testid": "multiBodiedExtension--overlay"
  }), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), (0, _react2.jsx)("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: containerClassNames
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    ,
    css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
    "data-testid": "multiBodiedExtension--container",
    "data-multiBodiedExtension-container": true,
    "data-active-child-index": activeChildIndex
  }, allowBodiedOverride ? (0, _react2.jsx)("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: bodyContainerClassNames,
    "data-testid": "multiBodiedExtension--body-container"
  }, extensionHandlerResult) : (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("nav", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: navigationClassNames
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    ,
    css: _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeNavigation,
    "data-testid": "multiBodiedExtension-navigation"
  }, extensionHandlerResult), childrenContainer))));
};
var MultiBodiedExtension = function MultiBodiedExtension(props) {
  var pluginInjectionApi = props.pluginInjectionApi;
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['width'], function (states) {
      var _states$widthState, _states$widthState2;
      return {
        width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width,
        lineLength: (_states$widthState2 = states.widthState) === null || _states$widthState2 === void 0 ? void 0 : _states$widthState2.lineLength
      };
    }),
    width = _useSharedPluginState.width,
    lineLength = _useSharedPluginState.lineLength;
  // Ignored via go/ees005
  return (0, _react2.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
    widthState: width === undefined ? undefined : {
      width: width,
      lineLength: lineLength
    }
    // eslint-disable-next-line react/jsx-props-no-spreading
  }, props));
};
var _default = exports.default = MultiBodiedExtension;