"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TooltipView = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _box = require("../../../primitives/box");

var _branding = require("../../../mixins/branding");

var _tooltip = require("./tooltip.css-rules");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

// We need to set data-attribute to decide styling
// instead of using props so that Popper.JS can
// update positioning correctly.
var PopperBox = (0, _styledComponents["default"])(_box.Box).withConfig({
  displayName: "PopperBox",
  componentId: "sc-1s7pgbj-0"
})(["background-color:", ";box-shadow:0 5px 15px 0 ", ";", ";padding:20px;border-radius:", ";z-index:30;max-width:240px;&[data-placement*='bottom']{margin-top:15px;}&[data-placement*='top']{margin-bottom:15px;}&[data-placement*='right']{margin-left:15px;}&[data-placement*='left']{margin-right:15px;}"], (0, _branding.getPaletteColor)('white'), _tooltip.getTooltipShadowColor, function (props) {
  return props.popperStyle;
}, _tooltip.getCardBorderRadius);

var Arrow = _styledComponents["default"].div.withConfig({
  displayName: "Arrow",
  componentId: "sc-1s7pgbj-1"
})(["position:absolute;width:20px;height:20px;&[data-placement*='bottom']{top:0;left:0;margin-top:-10px;&::before{border-width:0 10px 10px 10px;border-color:transparent transparent ", " transparent;}}&[data-placement*='top']{bottom:0;left:0;margin-bottom:-10px;filter:drop-shadow(0px 4px 2px ", ");width:20px;height:10px;&::before{border-width:10px 10px 0 10px;border-color:", " transparent transparent transparent;}}&[data-placement*='right']{left:0;margin-left:-15px;filter:drop-shadow(-4px 0px 2px ", ");&::before{border-width:10px 10px 10px 0;border-color:transparent ", " transparent transparent;}}&[data-placement*='left']{right:0;margin-right:-15px;filter:drop-shadow(4px 0px 2px ", ");&::before{border-width:10px 0 10px 10px;border-color:transparent transparent transparent ", ";}}&::before{content:'';margin:auto;display:block;width:0;height:0;border-style:solid;}"], (0, _branding.getPaletteColor)('white'), _tooltip.getTooltipShadowColor, (0, _branding.getPaletteColor)('white'), _tooltip.getTooltipShadowColor, (0, _branding.getPaletteColor)('white'), _tooltip.getTooltipShadowColor, (0, _branding.getPaletteColor)('white'));

var TooltipView = _react["default"].forwardRef(function (_ref, ref) {
  var style = _ref.style,
      placement = _ref.placement,
      arrowProps = _ref.arrowProps,
      popperId = _ref.popperId,
      children = _ref.children;
  return _react["default"].createElement(PopperBox, {
    "data-placement": placement,
    ref: ref,
    style: style,
    role: "tooltip",
    id: popperId
  }, children, _react["default"].createElement(Arrow, {
    ref: arrowProps.ref,
    "data-placement": placement,
    style: arrowProps.style
  }));
});

exports.TooltipView = TooltipView;