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; }
/** @jsx jsx */

import React, { Fragment } from 'react';
import { jsx } from '@emotion/react';
import classnames from 'classnames';
import { WithPluginState } from '../../..//with-plugin-state';
import { useSharedPluginState } from '../../../hooks';
import { overflowShadow } from '../../../ui';
import { calculateBreakoutStyles } from '../../../utils';
import ExtensionLozenge from '../Lozenge';
import { overlay } from '../styles';
import { content, contentWrapper, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyle } from './styles';
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.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 = classnames('extension-container', 'block', shadowClassNames, _defineProperty({
    'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
    'with-border': showMacroInteractionDesignUpdates,
    'with-bodied-border': showMacroInteractionDesignUpdates && hasBody,
    'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
    'with-hover-border': 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
  });
  var headerClassNames = classnames({
    'with-children': hasChildren,
    'without-frame': removeBorder
  });
  var newContentClassNames = classnames({
    'with-padding-styles': showMacroInteractionDesignUpdates
  });
  var contentClassNames = classnames('extension-content', 'block', {
    'remove-border': showMacroInteractionDesignUpdates
  });
  var customContainerStyles = {
    width: '100%'
  };
  var newContentStyles = {};
  if (shouldBreakout) {
    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, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
    isNodeSelected: isNodeSelected,
    isNodeHovered: isNodeHovered,
    isNodeNested: isNodeNested,
    node: node,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
    customContainerStyles: customContainerStyles,
    setIsNodeHovered: setIsNodeHovered,
    isBodiedMacro: hasBody
  }), jsx("div", {
    ref: handleRef,
    "data-layout": node.attrs.layout,
    className: classNames,
    css: wrapperStyle,
    style: customContainerStyles,
    onMouseEnter: function onMouseEnter() {
      return handleMouseEvent(true);
    },
    onMouseLeave: function onMouseLeave() {
      return handleMouseEvent(false);
    }
  }, jsx("div", {
    className: overflowClassNames,
    css: overflowWrapperStyles
  }, jsx("div", {
    className: 'extension-overlay',
    css: overlay
  }), jsx("div", {
    css: header,
    contentEditable: false,
    className: headerClassNames
  }, !removeBorder && jsx(ExtensionLozenge, {
    isNodeSelected: isNodeSelected,
    node: node,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
  }), children), hasBody && jsx("div", {
    css: newContentStyles,
    className: newContentClassNames
  }, jsx("div", {
    css: 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 ? jsx(ExtensionDeprecated, props) : jsx(ExtensionWithSharedState, props);
};
var ExtensionWithSharedState = function ExtensionWithSharedState(props) {
  var pluginInjectionApi = props.pluginInjectionApi;
  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
    widthState = _useSharedPluginState.widthState;
  return jsx(ExtensionWithPluginState, _extends({
    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
    jsx(WithPluginState, {
      editorView: props.view,
      plugins: {
        widthState: widthPluginKey
      },
      render: function render(_ref) {
        var widthState = _ref.widthState;
        return jsx(ExtensionWithPluginState, _extends({
          widthState: widthState
        }, props));
      }
    })
  );
};

/**
 * End workaround
 */

export default overflowShadow(Extension, {
  overflowSelector: '.extension-overflow-wrapper'
});