import React, { useState, useEffect } from 'react';
import 'react-dom';
import { c as _slicedToArray } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { P as Portal } from '../index-930c2100.js';
import useActivify from '../hooks/useActivify.js';
import '../key_codes-a5a2b85e.js';
import { u as useEscapeKey } from '../index-6b96e57a.js';
import space from '@styled-system/space';
import color from '@styled-system/color';
import border from '@styled-system/border';
import variant from '@styled-system/variant';
import typography from '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';

var POSITIONER_CONSTANTS = {
  MAX_TOOLTIP_WIDTH: 150,
  OFFSET: {
    TOP: 10,
    RIGHT: 10,
    BOTTOM: 10,
    LEFT: 10
  },
  ARROW: {
    DEFAULT: "50%",
    FULL: "100%",
    RIGHT: -6
  }
};

function usePositioner(_ref) {
  var attachTo = _ref.attachTo,
      attachee = _ref.attachee,
      _ref$position = _ref.position,
      position = _ref$position === void 0 ? "TOP" : _ref$position,
      offset = _ref.offset;

  var _useState = useState({}),
      _useState2 = _slicedToArray(_useState, 2),
      value = _useState2[0],
      setValue = _useState2[1];

  useEffect(function () {
    if (!attachTo.current || !attachee.current) return;
    var rect = attachTo.current.getBoundingClientRect();
    var tooltipRect = attachee.current.getBoundingClientRect();
    var coordinates = {};

    switch (position) {
      case "TOP":
        {
          coordinates.top = rect.top - tooltipRect.height - POSITIONER_CONSTANTS.OFFSET.TOP;
          coordinates.left = rect.left - tooltipRect.width / 2 + rect.width / 2;
          coordinates.arrowCoords = {
            left: POSITIONER_CONSTANTS.ARROW.DEFAULT
          };
          break;
        }

      case "RIGHT":
        {
          coordinates.top = rect.top - tooltipRect.height / 2 + rect.height / 2;
          coordinates.left = rect.right + POSITIONER_CONSTANTS.OFFSET.RIGHT;
          coordinates.arrowCoords = {
            left: POSITIONER_CONSTANTS.ARROW.RIGHT,
            top: tooltipRect.height / 2 + POSITIONER_CONSTANTS.ARROW.RIGHT
          };
          break;
        }

      case "BOTTOM":
        {
          coordinates.top = rect.bottom + POSITIONER_CONSTANTS.OFFSET.BOTTOM;
          coordinates.left = rect.left - tooltipRect.width / 2 + rect.width / 2;
          coordinates.arrowCoords = {
            left: POSITIONER_CONSTANTS.ARROW.DEFAULT
          };
          break;
        }

      case "LEFT":
        {
          coordinates.top = rect.top - tooltipRect.height / 2 + rect.height / 2;
          coordinates.left = rect.left - tooltipRect.width - POSITIONER_CONSTANTS.OFFSET.LEFT;
          coordinates.arrowCoords = {
            left: POSITIONER_CONSTANTS.ARROW.FULL,
            top: tooltipRect.height / 2 + POSITIONER_CONSTANTS.ARROW.RIGHT
          };
          break;
        }

      default:
        {
          coordinates.top = rect.bottom + POSITIONER_CONSTANTS.OFFSET.BOTTOM;
          coordinates.left = rect.left - tooltipRect.width / 2 + rect.width / 2;
          coordinates.arrowCoords = {
            left: POSITIONER_CONSTANTS.ARROW.DEFAULT
          };
        }
    }

    var leftDiff = rect.left + rect.width / 2 - tooltipRect.width / 2 - 8;
    var rightDiff = window.innerWidth - (rect.left + rect.width / 2 + tooltipRect.width / 2) - 24;

    if (leftDiff < 0) {
      coordinates.left -= leftDiff;
      coordinates.arrowCoords.left = rect.left;
    } else {
      leftDiff = 0;
    }

    if (rightDiff < 0) {
      coordinates.left += rightDiff;
      coordinates.arrowCoords.left = tooltipRect.width / 2 - rightDiff;
    } else {
      rightDiff = 0;
    }

    if (offset && offset.left) {
      coordinates.left += offset.left;
    }

    if (offset && offset.top) {
      coordinates.top += offset.top;
    }

    setValue(coordinates);
  }, [attachTo.current, attachee.current]);
  return value;
}

var TooltipColor = variant({
  scale: "tooltipColors",
  variants: {
    primary: {},
    success: {},
    danger: {}
  }
});
var TooltipSize = variant({
  prop: "size",
  scale: "tooltipSizes",
  variants: {
    small: {},
    regular: {},
    large: {}
  }
});
var TooltipMode = variant({
  prop: "mode",
  scale: "tooltipModes",
  variants: {
    active: {},
    inactive: {}
  }
});
var ArrowColorVariant = variant({
  prop: "variant",
  scale: "tooltipArrowColors",
  variants: {
    primary: {},
    success: {},
    danger: {}
  }
});
var ArrowPositionVariant = variant({
  prop: "position",
  scale: "tooltipArrowPositions",
  variants: {
    top: {},
    right: {},
    bottom: {},
    left: {}
  }
}); // Non customizable CSS props

var wrapperStyle = {
  position: "absolute",
  pointerEvents: "auto",
  zIndex: 1099999999999,
  borderRadius: 8,
  outline: "none",
  filter: "drop-shadow(rgba(0, 0, 0, 0.2) 3px 0px 12px)",
  transition: "opacity 0.2s ease, transform 0.2s ease"
};
var contentStyle = {
  maxHeight: "inherit",
  maxWidth: 550,
  overflow: "hidden",
  overflowX: "auto",
  lineHeight: 1.4
};
var arrowStyle = {
  position: "absolute",
  marginLeft: "-5px",
  border: "6px solid"
};
var ThemedWrapper = styled("div")(wrapperStyle, space, color, border, typography, TooltipColor, TooltipSize, TooltipMode);
var ThemedContent = styled("div")(contentStyle, space, color, border, typography);
var ThemedArrow = styled("div")(arrowStyle, space, color, border, ArrowColorVariant, ArrowPositionVariant); // Customizable CSS props

ThemedWrapper.defaultProps = {
  mode: "inactive",
  borderRadius: 8,
  variant: "primary",
  size: "regular",
  fontFamily: "\"Proxima Nova\", sans-serif"
};
ThemedContent.defaultProps = {
  padding: "zero"
};
ThemedArrow.defaultProps = {
  position: "top",
  variant: "primary.bottom"
};

var css = ".Tooltip_tooltipWrapper__2LPU6 {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1099999999999; }\n\n.Tooltip_tooltipOverlay__28xTu {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%; }\n\n.Tooltip_tooltip__35nZ0 {\n  opacity: 0;\n  position: absolute;\n  pointer-events: auto;\n  z-index: 2;\n  border-radius: 8px;\n  outline: none;\n  filter: drop-shadow(rgba(0, 0, 0, 0.2) 3px 0px 12px);\n  transition: 0.1s ease-in-out;\n  transform: translate3d(0, 4px, 0); }\n  .Tooltip_tooltip__35nZ0 .Tooltip_tooltipArrow__1G_2M {\n    position: absolute;\n    left: 50%;\n    margin-left: -5px;\n    border: 6px solid;\n    margin-left: -5px; }\n    .Tooltip_tooltip__35nZ0 .Tooltip_tooltipArrow__1G_2M.Tooltip_bottom__1zjAo {\n      border-top-color: transparent !important;\n      border-right-color: transparent !important;\n      border-bottom-color: #28394b;\n      border-left-color: transparent !important;\n      margin-top: -20px;\n      top: 0; }\n    .Tooltip_tooltip__35nZ0 .Tooltip_tooltipArrow__1G_2M.Tooltip_top__mkIWq {\n      border-top-color: #28394b;\n      border-right-color: transparent !important;\n      border-bottom-color: transparent !important;\n      border-left-color: transparent !important;\n      top: 100%;\n      margin-top: 0; }\n  .Tooltip_tooltip__35nZ0 * {\n    font-family: \"Roboto\", sans-serif; }\n  .Tooltip_tooltip__35nZ0.Tooltip_tooltipActive__qnRU3 {\n    opacity: 1 !important;\n    transform: translate3d(0, 0, 0) !important; }\n\n.Tooltip_tooltipContent__uLcBp {\n  max-height: inherit !important;\n  max-width: 550px;\n  border-radius: 8px;\n  overflow: hidden;\n  overflow-x: auto;\n  line-height: 1.4; }\n  .Tooltip_tooltipContent__uLcBp.Tooltip_bottom__1zjAo {\n    margin-top: -8px; }\n\n.Tooltip_tooltipWrapperHover__2Jj0B {\n  height: auto; }\n";
var styles = {"tooltipWrapper":"Tooltip_tooltipWrapper__2LPU6","tooltipOverlay":"Tooltip_tooltipOverlay__28xTu","tooltip":"Tooltip_tooltip__35nZ0","tooltipArrow":"Tooltip_tooltipArrow__1G_2M","bottom":"Tooltip_bottom__1zjAo","top":"Tooltip_top__mkIWq","tooltipActive":"Tooltip_tooltipActive__qnRU3","tooltipContent":"Tooltip_tooltipContent__uLcBp","tooltipWrapperHover":"Tooltip_tooltipWrapperHover__2Jj0B"};
styleInject(css);

var modalRoot = document.getElementById("portal-root");

if (!modalRoot) {
  modalRoot = document.createElement("div");
  modalRoot.setAttribute("id", "portal-root");
  document.body.appendChild(modalRoot);
}

function Tooltip(_ref) {
  var active = _ref.active,
      position = _ref.position,
      className = _ref.className,
      prefixClassName = _ref.prefixClassName,
      attachTo = _ref.attachTo,
      onClose = _ref.onClose,
      children = _ref.children,
      offset = _ref.offset,
      dismissable = _ref.dismissable,
      themed = _ref.themed,
      variant = _ref.variant,
      size = _ref.size,
      tooltip = _ref.tooltip,
      trigger = _ref.trigger;

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      dismissed = _React$useState2[0],
      setDismissed = _React$useState2[1];

  var _React$useState3 = React.useState(false),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      tooltipActive = _React$useState4[0],
      setTooltipActive = _React$useState4[1];

  var tooltipRef = React.useRef();
  var DOMRef = React.useRef();
  var triggerEnabled = !attachTo;
  var handleMouseEnter = React.useCallback(function () {
    if (trigger === "hover") setTooltipActive(true);
  });
  var handleMouseLeave = React.useCallback(function () {
    if (trigger === "hover") setTooltipActive(false);
  });
  var coordinates = usePositioner({
    attachTo: triggerEnabled ? DOMRef : attachTo,
    attachee: tooltipRef,
    position: position,
    offset: offset
  });
  var tooltipActiveStatus = triggerEnabled ? tooltipActive : active;

  var _useActivify = useActivify(tooltipActiveStatus && !dismissed),
      enabled = _useActivify.enabled,
      visible = _useActivify.visible;

  var activeClassName = visible ? styles.tooltipActive : "";
  var tooltipPosition = position ? position.toLowerCase() : "bottom";
  var topPositionClassName = styles[tooltipPosition];
  var handleClose = React.useCallback(function () {
    if (dismissable) setDismissed(true);
    setTooltipActive(false);
    onClose();
  });
  useEscapeKey(handleClose);

  var handleScroll = function handleScroll() {
    setTooltipActive(false);
    onClose();
  };

  React.useEffect(function () {
    if (tooltipActive || themed && active) {
      window.addEventListener("scroll", handleScroll, {
        passive: true
      });
    } else {
      window.removeEventListener("scroll", handleScroll);
    }
  }, [tooltipActive, active]);
  if (!triggerEnabled && (!attachTo || !enabled)) return null;

  var renderTooltipContent = function renderTooltipContent() {
    if (themed) {
      var arrowPosition = position ? position.toLowerCase() : "bottom";
      var tooltipActiveMode = activeClassName && coordinates.top;
      return React.createElement(ThemedWrapper, {
        ref: tooltipRef,
        style: coordinates,
        mode: tooltipActiveMode ? "active" : "inactive",
        variant: variant,
        size: size
      }, React.createElement(ThemedContent, null, coordinates.arrowCoords && React.createElement(ThemedArrow, {
        variant: "".concat(variant, ".").concat([arrowPosition]),
        position: arrowPosition,
        style: coordinates.arrowCoords
      }), triggerEnabled ? tooltip : children));
    }

    return React.createElement("div", {
      className: "".concat(styles.tooltip, " ").concat(activeClassName, " ").concat(prefixClassName, "-inner"),
      ref: tooltipRef,
      style: coordinates
    }, React.createElement("div", {
      className: "".concat(styles.tooltipArrow, " ").concat(topPositionClassName, " ").concat(prefixClassName, "-caret")
    }), React.createElement("div", {
      className: "".concat(styles.tooltipContent, " ").concat(topPositionClassName, " ").concat(prefixClassName, "-body")
    }, children));
  };

  var renderPortal = function renderPortal() {
    var hoverEnabledClassName = triggerEnabled && enabled && trigger === "hover" ? styles.tooltipWrapperHover : "";
    return React.createElement(Portal, {
      node: document && document.getElementById("portal-root")
    }, React.createElement("div", {
      className: "".concat(styles.tooltipWrapper, " ").concat(className, " ").concat(prefixClassName, " ").concat(hoverEnabledClassName)
    }, React.createElement("div", {
      onClick: handleClose,
      className: "".concat(styles.tooltipOverlay, " ").concat(prefixClassName, "-overlay")
    }), renderTooltipContent()));
  };

  return React.createElement(React.Fragment, null, themed && triggerEnabled ? React.createElement("span", {
    style: {
      display: "inline-block"
    },
    ref: DOMRef,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    onClick: function onClick() {
      if (trigger === "click" && !tooltipActive) {
        setTooltipActive(true);
      }
    }
  }, children, enabled && renderPortal()) : renderPortal());
}

Tooltip.propTypes = {
  attachTo: PropTypes.object.isRequired,
  active: PropTypes.bool,
  dismissable: PropTypes.bool,
  children: PropTypes.node,
  className: PropTypes.string,
  prefixClassName: PropTypes.string,
  onClose: PropTypes.func,
  position: PropTypes.string,
  themed: PropTypes.bool,
  variant: PropTypes.string,
  size: PropTypes.string,
  offset: PropTypes.shape({
    top: PropTypes.number,
    left: PropTypes.number
  }),
  tooltip: PropTypes.string,
  trigger: PropTypes.string
};
Tooltip.defaultProps = {
  active: false,
  dismissable: false,
  children: null,
  className: "",
  prefixClassName: "",
  position: "",
  onClose: function onClose() {},
  offset: null,
  themed: false,
  variant: "primary",
  size: "regular",
  tooltip: "",
  trigger: "hover"
};
Tooltip.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Tooltip",
  "props": {
    "active": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "dismissable": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "children": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "node"
      },
      "required": false,
      "description": ""
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "position": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onClose": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "offset": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "shape",
        "value": {
          "top": {
            "name": "number",
            "required": false
          },
          "left": {
            "name": "number",
            "required": false
          }
        }
      },
      "required": false,
      "description": ""
    },
    "themed": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "variant": {
      "defaultValue": {
        "value": "\"primary\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "size": {
      "defaultValue": {
        "value": "\"regular\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "tooltip": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "trigger": {
      "defaultValue": {
        "value": "\"hover\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "attachTo": {
      "type": {
        "name": "object"
      },
      "required": true,
      "description": ""
    }
  }
};

export default Tooltip;
