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 __());
    };
})();
import * as React from 'react';
import TetherComponent from 'react-tether';
import styled, { css } from 'react-emotion';
var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: #373b44;\n  border-radius: 2px;\n  pointer-events: none;\n  color: white;\n  font-size: 12px;\n  padding: 10px;\n  text-align: center;\n  margin-top: 16px;\n  line-height: normal;\n  max-width: 220px;\n\n  i {\n    color: #4dc3ff\n  }\n\n  &::before {\n    content: '';\n    background-color: #373b44;\n    width: 8px;\n    height: 8px;\n    display: block;\n    position: absolute;\n    transform: translate(-50%, 0) rotate(45deg);\n    top: 12px;\n    left: 50%;\n\n    ", "\n  }\n\n  ", ";\n"], ["\n  background-color: #373b44;\n  border-radius: 2px;\n  pointer-events: none;\n  color: white;\n  font-size: 12px;\n  padding: 10px;\n  text-align: center;\n  margin-top: 16px;\n  line-height: normal;\n  max-width: 220px;\n\n  i {\n    color: #4dc3ff\n  }\n\n  &::before {\n    content: '';\n    background-color: #373b44;\n    width: 8px;\n    height: 8px;\n    display: block;\n    position: absolute;\n    transform: translate(-50%, 0) rotate(45deg);\n    top: 12px;\n    left: 50%;\n\n    ",
    "\n  }\n\n  ",
    ";\n"])), function (props) { return props.position === 'right' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      transform: translate(0, -50%) rotate(45deg);\n      top: 50%;\n      left: 12px;\n    "], ["\n      transform: translate(0, -50%) rotate(45deg);\n      top: 50%;\n      left: 12px;\n    "]))); }, function (props) {
    return props.position === 'right' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-top: 0px;\n      margin-left: 16px\n    "], ["\n      margin-top: 0px;\n      margin-left: 16px\n    "])));
});
var attachmentPostion = {
    top: 'bottom center',
    bottom: 'top center',
    left: 'middle right',
    right: 'middle left',
};
var targetPosition = {
    top: 'top center',
    bottom: 'bottom center',
    left: 'middle left',
    right: 'middle right',
};
var Tooltip = /** @class */ (function (_super) {
    __extends(Tooltip, _super);
    function Tooltip() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = { isVisible: false };
        _this.onMouseOver = function () {
            _this.setState({ isVisible: true });
        };
        _this.onMouseOut = function () {
            _this.setState({ isVisible: false });
        };
        return _this;
    }
    Tooltip.prototype.render = function () {
        var isVisible = this.state.isVisible;
        var _a = this.props, children = _a.children, content = _a.content, _b = _a.position, position = _b === void 0 ? 'bottom' : _b;
        var _c = this, onMouseOver = _c.onMouseOver, onMouseOut = _c.onMouseOut;
        if (!content) {
            return children({});
        }
        return (React.createElement(TetherComponent, { attachment: attachmentPostion[position], targetAttachment: targetPosition[position], style: { zIndex: 20 } },
            children({ onMouseOver: onMouseOver, onMouseOut: onMouseOut }),
            isVisible && React.createElement(Container, { position: position }, content)));
    };
    return Tooltip;
}(React.Component));
export default Tooltip;
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=Tooltip.js.map