/** @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 { inlineWrapperStyels, wrapperStyle } from './styles';
var InlineExtension = function InlineExtension(props) {
  var node = props.node,
    pluginInjectionApi = props.pluginInjectionApi,
    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
    isNodeSelected = props.isNodeSelected,
    children = props.children,
    isNodeHovered = props.isNodeHovered,
    setIsNodeHovered = props.setIsNodeHovered;
  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
    widthState = _useSharedPluginState.widthState;
  var hasChildren = !!children;
  var classNames = classnames('extension-container', 'inline', 'with-overlay', {
    'with-children': hasChildren,
    'with-danger-overlay': showMacroInteractionDesignUpdates
  });
  var rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
  var extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
  var handleMouseEvent = function handleMouseEvent(didHover) {
    if (setIsNodeHovered) {
      setIsNodeHovered(didHover);
    }
  };
  var inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
    node: node,
    isNodeSelected: isNodeSelected,
    isNodeHovered: isNodeHovered,
    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
  }), jsx("div", {
    "data-testid": "inline-extension-wrapper",
    css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
    className: classNames,
    onMouseEnter: function onMouseEnter() {
      return handleMouseEvent(true);
    },
    onMouseLeave: function onMouseLeave() {
      return 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;