/** @jsx jsx */
import React, { Fragment } from 'react';
import { jsx } from '@emotion/react';
import classnames from 'classnames';
import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
import { useSharedPluginState } from '../../../hooks';
import { createWidthContext, WidthContext } from '../../../ui';
import ExtensionLozenge from '../Lozenge';
import { overlay } from '../styles';
import { inlineWrapperStyles, wrapperStyle } from './styles';
const InlineExtension = props => {
  const {
    node,
    pluginInjectionApi,
    showMacroInteractionDesignUpdates,
    isNodeSelected,
    children,
    isNodeHovered,
    setIsNodeHovered
  } = props;
  const {
    widthState
  } = useSharedPluginState(pluginInjectionApi, ['width']);
  const hasChildren = !!children;
  const classNames = classnames('extension-container', 'inline', {
    'with-overlay': !showMacroInteractionDesignUpdates,
    'with-children': hasChildren,
    'with-danger-overlay': showMacroInteractionDesignUpdates,
    'with-border': showMacroInteractionDesignUpdates,
    'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
  });
  const rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
  const extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
  const handleMouseEvent = didHover => {
    if (setIsNodeHovered) {
      setIsNodeHovered(didHover);
    }
  };
  const inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
    node: node,
    isNodeSelected: isNodeSelected,
    isNodeHovered: isNodeHovered,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
    setIsNodeHovered: setIsNodeHovered
  }), jsx("div", {
    "data-testid": "inline-extension-wrapper",
    css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyles],
    className: classNames,
    onMouseEnter: () => handleMouseEvent(true),
    onMouseLeave: () => handleMouseEvent(false)
  }, jsx("div", {
    css: overlay,
    className: "extension-overlay"
  }), children ? children : jsx(ExtensionLozenge, {
    node: node,
    isNodeSelected: isNodeSelected,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
  })));
  if (extendedInlineExtension) {
    return jsx(WidthContext.Provider, {
      value: createWidthContext(rendererContainerWidth)
    }, inlineExtensionInternal);
  }
  return inlineExtensionInternal;
};
export default InlineExtension;