import _styled2 from "styled-components";
import _styled from "styled-components";
var _excluded = ["contentId", "scheme", "onMouseEnter", "onMouseLeave", "children", "renderTarget", "targetElement", "isVisible", "placement", "role"];
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React, { useRef } from 'react';
import { Transition } from 'react-transition-group';
import mergeRefs from 'react-merge-refs';
import { FloatingBoxContent } from './FloatingBoxContent';
import { StyledFloatingBox } from './partials/StyledFloatingBox';
import { StyledTarget } from './partials/StyledTarget';
import { StyledArrow } from './partials/StyledArrow';
import { useFloatingElement } from '../../hooks/useFloatingElement';
import { FLOATING_BOX_SCHEME } from './constants';
import { useExternalId } from '../../hooks/useExternalId';
export var FloatingBox = function FloatingBox(_ref) {
  var _attributes$popper, _calculatedPlacement$;
  var externalContentId = _ref.contentId,
    _ref$scheme = _ref.scheme,
    scheme = _ref$scheme === void 0 ? FLOATING_BOX_SCHEME.LIGHT : _ref$scheme,
    onMouseEnter = _ref.onMouseEnter,
    onMouseLeave = _ref.onMouseLeave,
    children = _ref.children,
    renderTarget = _ref.renderTarget,
    targetElement = _ref.targetElement,
    isVisible = _ref.isVisible,
    _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
    _ref$role = _ref.role,
    role = _ref$role === void 0 ? 'dialog' : _ref$role,
    rest = _objectWithoutProperties(_ref, _excluded);
  var nodeRef = useRef(null);
  var contentId = useExternalId('floating-box', externalContentId);
  var _useFloatingElement = useFloatingElement(placement, undefined, targetElement),
    targetElementRef = _useFloatingElement.targetElementRef,
    floatingElementRef = _useFloatingElement.floatingElementRef,
    arrowElementRef = _useFloatingElement.arrowElementRef,
    styles = _useFloatingElement.styles,
    attributes = _useFloatingElement.attributes;
  var calculatedPlacement = attributes === null || attributes === void 0 ? void 0 : (_attributes$popper = attributes.popper) === null || _attributes$popper === void 0 ? void 0 : _attributes$popper['data-popper-placement'];
  var basePlacement = calculatedPlacement === null || calculatedPlacement === void 0 ? void 0 : (_calculatedPlacement$ = calculatedPlacement.split('-', 1)) === null || _calculatedPlacement$ === void 0 ? void 0 : _calculatedPlacement$[0];
  return /*#__PURE__*/React.createElement(React.Fragment, null, renderTarget && /*#__PURE__*/React.createElement(StyledTarget, {
    ref: targetElementRef
  }, renderTarget), /*#__PURE__*/React.createElement(Transition, {
    nodeRef: nodeRef,
    in: isVisible,
    timeout: 0,
    unmountOnExit: true
  }, function (state) {
    return /*#__PURE__*/React.createElement(_StyledStyledFloatingBox, _extends({
      $transitionStatus: state,
      ref: mergeRefs([nodeRef, floatingElementRef]),
      onMouseEnter: onMouseEnter,
      onMouseLeave: onMouseLeave,
      role: role
    }, attributes.popper, rest, {
      $_css: styles.popper
    }), /*#__PURE__*/React.createElement(FloatingBoxContent, {
      contentId: contentId,
      scheme: scheme
    }, /*#__PURE__*/React.createElement(_StyledStyledArrow, _extends({
      $placement: basePlacement,
      ref: arrowElementRef
    }, attributes.arrow, {
      $_css2: styles.arrow
    })), children));
  }));
};
FloatingBox.displayName = 'FloatingBox';
var _StyledStyledFloatingBox = _styled(StyledFloatingBox).withConfig({
  displayName: "FloatingBox___StyledStyledFloatingBox",
  componentId: "sc-1sbc7z1-0"
})(["", ""], function (p) {
  return p.$_css;
});
var _StyledStyledArrow = _styled(StyledArrow).withConfig({
  displayName: "FloatingBox___StyledStyledArrow",
  componentId: "sc-1sbc7z1-1"
})(["", ""], function (p) {
  return p.$_css2;
});