"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 _withPluginState = require("../../..//with-plugin-state");
var _hooks = require("../../../hooks");
var _ui = require("../../../ui");
var _utils = require("../../../utils");
var _Lozenge = _interopRequireDefault(require("../Lozenge"));
var _styles = require("../styles");
var _styles2 = require("./styles");
var _excluded = ["type"];
/** @jsx jsx */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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; }
function ExtensionWithPluginState(props) {
  var node = props.node,
    handleContentDOMRef = props.handleContentDOMRef,
    children = props.children,
    _props$widthState = props.widthState,
    widthState = _props$widthState === void 0 ? {
      width: 0
    } : _props$widthState,
    handleRef = props.handleRef,
    shadowClassNames = props.shadowClassNames,
    hideFrame = props.hideFrame,
    editorAppearance = props.editorAppearance,
    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
    isNodeSelected = props.isNodeSelected,
    isNodeHovered = props.isNodeHovered,
    isNodeNested = props.isNodeNested,
    setIsNodeHovered = props.setIsNodeHovered;
  var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
  var isMobile = editorAppearance === 'mobile';
  var hasChildren = !!children;
  var removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !isMobile && !hasBody);
  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;
    return false;
  }, [view, getPos]);
  var shouldBreakout =
  // Extension should breakout when the layout is set to 'full-width' or 'wide'.
  ['full-width', 'wide'].includes(node.attrs.layout) &&
  // Extension breakout state should only be respected for top level nodes.
  isTopLevelNode &&
  // Extension breakout state should not be respected when the editor appearance is full-width mode
  editorAppearance !== 'full-width';
  var classNames = (0, _classnames2.default)('extension-container', 'block', shadowClassNames, (0, _defineProperty2.default)({
    'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
    'with-border': showMacroInteractionDesignUpdates,
    'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
    'with-hover-border': 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
  });
  var headerClassNames = (0, _classnames2.default)({
    'with-children': hasChildren,
    'without-frame': removeBorder
  });
  var newContentClassNames = (0, _classnames2.default)({
    'remove-padding': showMacroInteractionDesignUpdates
  });
  var contentClassNames = (0, _classnames2.default)('extension-content', 'block', {
    'remove-border': showMacroInteractionDesignUpdates
  });
  var customContainerStyles = {
    width: '100%'
  };
  var newContentStyles = {};
  if (shouldBreakout) {
    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, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
    isNodeSelected: isNodeSelected,
    isNodeHovered: isNodeHovered,
    node: node,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
    customContainerStyles: customContainerStyles
  }), (0, _react2.jsx)("div", {
    ref: handleRef,
    "data-layout": node.attrs.layout,
    className: classNames,
    css: _styles2.wrapperStyle,
    style: customContainerStyles,
    onMouseEnter: function onMouseEnter() {
      return handleMouseEvent(true);
    },
    onMouseLeave: function onMouseLeave() {
      return handleMouseEvent(false);
    }
  }, (0, _react2.jsx)("div", {
    className: overflowClassNames,
    css: _styles2.overflowWrapperStyles
  }, (0, _react2.jsx)("div", {
    className: 'extension-overlay',
    css: _styles.overlay
  }), (0, _react2.jsx)("div", {
    css: _styles2.header,
    contentEditable: false,
    className: headerClassNames
  }, !removeBorder && (0, _react2.jsx)(_Lozenge.default, {
    isNodeSelected: isNodeSelected,
    node: node,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
  }), children), hasBody && (0, _react2.jsx)("div", {
    css: newContentStyles,
    className: newContentClassNames
  }, (0, _react2.jsx)("div", {
    css: _styles2.content,
    ref: handleContentDOMRef,
    className: contentClassNames
  })))));
}
var Extension = function Extension(props) {
  // TODO: ED-17836 This code is here because confluence injects
  // the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
  // which cannot access the `pluginInjectionApi`. When we move
  // Confluence to using presets we can remove this workaround.
  var pluginInjectionApi = props.pluginInjectionApi;
  return pluginInjectionApi === undefined ? (0, _react2.jsx)(ExtensionDeprecated, props) : (0, _react2.jsx)(ExtensionWithSharedState, props);
};
var ExtensionWithSharedState = function ExtensionWithSharedState(props) {
  var pluginInjectionApi = props.pluginInjectionApi;
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
    widthState = _useSharedPluginState.widthState;
  return (0, _react2.jsx)(ExtensionWithPluginState, (0, _extends2.default)({
    widthState: widthState
  }, props));
};

// TODO: ED-17836 This code is here because Confluence injects
// the `editor-referentiality` plugin via `dangerouslyAppendPlugins`
// which cannot access the `pluginInjectionApi`. When we move
// Confluence to using presets we can remove this workaround.
// @ts-ignore
var widthPluginKey = {
  key: 'widthPlugin$',
  getState: function getState(state) {
    return state['widthPlugin$'];
  }
};
var ExtensionDeprecated = function ExtensionDeprecated(props) {
  return (
    // @ts-ignore - 'WithPluginState' cannot be used as a JSX component.
    // This error was introduced after upgrading to TypeScript 5
    (0, _react2.jsx)(_withPluginState.WithPluginState, {
      editorView: props.view,
      plugins: {
        widthState: widthPluginKey
      },
      render: function render(_ref) {
        var widthState = _ref.widthState;
        return (0, _react2.jsx)(ExtensionWithPluginState, (0, _extends2.default)({
          widthState: widthState
        }, props));
      }
    })
  );
};

/**
 * End workaround
 */
var _default = exports.default = (0, _ui.overflowShadow)(Extension, {
  overflowSelector: '.extension-overflow-wrapper'
});