import _extends from "@babel/runtime/helpers/extends";
/** @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) {
  const {
    node,
    handleContentDOMRef,
    children,
    widthState = {
      width: 0
    },
    handleRef,
    shadowClassNames,
    hideFrame,
    editorAppearance,
    showMacroInteractionDesignUpdates,
    isNodeSelected,
    isNodeHovered,
    isNodeNested,
    setIsNodeHovered
  } = props;
  const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
  const isMobile = editorAppearance === 'mobile';
  const hasChildren = !!children;
  const removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !isMobile && !hasBody);
  const {
    getPos,
    view
  } = props;
  const isTopLevelNode = React.useMemo(() => {
    const pos = typeof getPos === 'function' ? getPos() : undefined;
    return typeof pos !== 'undefined' && !isNaN(pos) && view.state.doc.resolve(pos).depth === 0;
    return false;
  }, [view, getPos]);
  const 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';
  const classNames = classnames('extension-container', 'block', shadowClassNames, {
    'with-overlay': !hasBody && !showMacroInteractionDesignUpdates,
    'with-border': showMacroInteractionDesignUpdates,
    'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered,
    'with-danger-overlay': showMacroInteractionDesignUpdates,
    'without-frame': removeBorder,
    [widerLayoutClassName]: shouldBreakout
  });
  const overflowClassNames = classnames('extension-overflow-wrapper', {
    'with-body': hasBody,
    'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested
  });
  const headerClassNames = classnames({
    'with-children': hasChildren,
    'without-frame': removeBorder
  });
  const newContentClassNames = classnames({
    'remove-padding': showMacroInteractionDesignUpdates
  });
  const contentClassNames = classnames('extension-content', 'block', {
    'remove-border': showMacroInteractionDesignUpdates
  });
  let customContainerStyles = {
    width: '100%'
  };
  let newContentStyles = {};
  if (shouldBreakout) {
    const {
      type,
      ...breakoutStyles
    } = calculateBreakoutStyles({
      mode: node.attrs.layout,
      widthStateWidth: widthState.width,
      widthStateLineLength: widthState.lineLength
    });
    newContentStyles = {
      ...breakoutStyles
    };
    customContainerStyles = breakoutStyles;
  }
  newContentStyles = {
    ...newContentStyles,
    ...contentWrapper
  };
  const handleMouseEvent = didHover => {
    if (setIsNodeHovered) {
      setIsNodeHovered(didHover);
    }
  };
  return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
    isNodeSelected: isNodeSelected,
    isNodeHovered: isNodeHovered,
    node: node,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
    customContainerStyles: customContainerStyles
  }), jsx("div", {
    ref: handleRef,
    "data-layout": node.attrs.layout,
    className: classNames,
    css: wrapperStyle,
    style: customContainerStyles,
    onMouseEnter: () => handleMouseEvent(true),
    onMouseLeave: () => 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
  })))));
}
const 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.
  const {
    pluginInjectionApi
  } = props;
  return pluginInjectionApi === undefined ? jsx(ExtensionDeprecated, props) : jsx(ExtensionWithSharedState, props);
};
const ExtensionWithSharedState = props => {
  const {
    pluginInjectionApi
  } = props;
  const {
    widthState
  } = useSharedPluginState(pluginInjectionApi, ['width']);
  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
const widthPluginKey = {
  key: 'widthPlugin$',
  getState: state => {
    return state['widthPlugin$'];
  }
};
const 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: ({
        widthState
      }) => jsx(ExtensionWithPluginState, _extends({
        widthState: widthState
      }, props))
    })
  );
};

/**
 * End workaround
 */

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