"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = __importStar(require("react"));
var ReactDOM = __importStar(require("react-dom"));
var styled_components_1 = __importDefault(require("styled-components"));
var styleConstants_1 = require("./styleConstants");
var TipContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  height: 0px;\n"], ["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  height: 0px;\n"])), function (props) { return props.top || 0; }, function (props) { return props.left || 0; });
var Tip = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  ", ";\n  left: 7px;\n  ", ";\n  transform: translateX(-50%);\n  width: ", "px;\n  color: ", ";\n  background: rgba(21, 21, 21, 0.9);\n  border-radius: 3px;\n  padding: 15px;\n  ", ";\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 15px;\n  text-transform: none;\n  z-index: 100001;\n  &:after {\n    content: \"\";\n    position: absolute;\n    left: calc(50% - 5px);\n    top: ", ";\n    width: 0;\n    height: 0;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-top: 6px solid rgba(21, 21, 21, 0.9);\n    transform: ", ";\n  }\n"], ["\n  position: absolute;\n  ", ";\n  left: 7px;\n  ",
    ";\n  transform: translateX(-50%);\n  width: ", "px;\n  color: ", ";\n  background: rgba(21, 21, 21, 0.9);\n  border-radius: 3px;\n  padding: 15px;\n  ",
    ";\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 15px;\n  text-transform: none;\n  z-index: 100001;\n  &:after {\n    content: \"\";\n    position: absolute;\n    left: calc(50% - 5px);\n    top: ", ";\n    width: 0;\n    height: 0;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-top: 6px solid rgba(21, 21, 21, 0.9);\n    transform: ", ";\n  }\n"])), function (props) { return (props.positionBottom ? "top: 30px" : "bottom: 10px"); }, function (props) {
    return props.verticalOffset ? "margin-" + (props.positionBottom ? "top" : "bottom") + ": " + props.verticalOffset + "px" : "";
}, function (props) { return props.width || (props.theme && props.theme.toolTipDefaultWidth) || 260; }, styleConstants_1.colors.basic.WHITE, function (props) {
    return props.theme && props.theme.toolTipTextAlign ? "text-align: " + props.theme.toolTipTextAlign : "";
}, styleConstants_1.fonts.SANS_SERIF, function (props) { return (props.positionBottom ? "-6px" : "100%"); }, function (props) { return (props.positionBottom ? "rotate(180deg)" : "rotate(0)"); });
// z-index to compete with wp
var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n"], ["\n  display: inline-block;\n  position: relative;\n"])));
var HitBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: transparent;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  min-width: 30px;\n  min-height: 30px;\n  top: 0;\n  left: 0;\n  z-index: 100001;\n"], ["\n  background-color: transparent;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  min-width: 30px;\n  min-height: 30px;\n  top: 0;\n  left: 0;\n  z-index: 100001;\n"])));
var ToolTip = /** @class */ (function (_super) {
    __extends(ToolTip, _super);
    function ToolTip(props) {
        var _this = _super.call(this, props) || this;
        _this.bucket = document.createElement("div");
        _this.getLeft = function () {
            var box = _this.divEl.getBoundingClientRect();
            return box.left - 5 + box.width / 2;
        };
        _this.getTop = function () {
            var box = _this.divEl.getBoundingClientRect();
            var scrollDist = (document.documentElement || document.body.parentNode || document.body).scrollTop;
            return scrollDist + box.top;
        };
        _this.onMouseEnter = function () {
            _this.setState({ open: true });
        };
        _this.onMouseLeave = function () {
            _this.setState({ open: false });
        };
        _this.divEl = null;
        _this.state = {
            open: false,
        };
        return _this;
    }
    ToolTip.prototype.componentDidMount = function () {
        document.body.appendChild(this.bucket);
    };
    ToolTip.prototype.componentWillUnmount = function () {
        this.bucket.remove();
    };
    ToolTip.prototype.render = function () {
        var _this = this;
        var tip = null;
        var hitBox = null;
        if (this.state.open) {
            tip = ReactDOM.createPortal(React.createElement(TipContainer, { left: this.getLeft(), top: this.getTop() },
                React.createElement(Tip, __assign({}, this.props), this.props.explainerText)), this.bucket);
            hitBox = React.createElement(HitBox, null);
        }
        return (React.createElement(Wrapper, { ref: function (el) { return (_this.divEl = el); }, onMouseLeave: this.onMouseLeave, onMouseEnter: this.onMouseEnter, onClick: this.props.onClick, className: this.props.className },
            tip,
            hitBox,
            this.props.children));
    };
    return ToolTip;
}(React.Component));
exports.ToolTip = ToolTip;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=ToolTip.js.map