"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
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 });
const react_1 = __importStar(require("react"));
const react_dom_1 = require("react-dom");
const tooltip_js_1 = __importDefault(require("tooltip.js"));
const styles_1 = require("../../styles");
const styles_2 = require("./styles");
exports.defaultProps = {
    role: 'group',
    placement: 'top',
    variant: 'primary',
};
class TooltipComponent extends react_1.default.Component {
    constructor() {
        super(...arguments);
        this.containerRef = react_1.default.createRef();
        this.getOptions = () => {
            const _a = this.props, { placement, role, children } = _a, otherProps = __rest(_a, ["placement", "role", "children"]);
            const popover = this.getPopover();
            return Object.assign({ placement, title: popover, html: true, container: document.body, popperOptions: {
                    modifiers: {
                        setState: {
                            order: 800,
                            enabled: true,
                            fn: this.modifier,
                        },
                    },
                } }, otherProps);
        };
        this.initPopper = () => {
            if (!this.popper) {
                const popover = this.getPopover();
                const parentNode = popover.parentNode;
                if (parentNode && getComputedStyle(parentNode).display !== 'none') {
                    this.popper = new tooltip_js_1.default(parentNode, this.getOptions());
                }
            }
        };
        this.destroyPopper = () => {
            if (this.popper) {
                this.popper.dispose();
                this.popper = undefined;
            }
        };
        this.getPopover = () => react_dom_1.findDOMNode(this);
        // We can't type this because we would need to add `popper.js` as dependency
        this.modifier = (data) => {
            // eslint-disable-next-line no-param-reassign
            data.arrowStyles.color = getComputedStyle(this.getPopover()).backgroundColor;
            return data;
        };
    }
    componentDidMount() {
        this.initPopper();
    }
    componentWillUnmount() {
        this.destroyPopper();
    }
    componentDidUpdate(prevProps) {
        if (prevProps.placement !== this.props.placement ||
            prevProps.children !== this.props.children) {
            this.destroyPopper();
            this.initPopper();
        }
    }
    hide() {
        this.popper && this.popper.hide();
    }
    render() {
        const { role, children, className } = this.props;
        return (react_1.default.createElement(react_1.Fragment, null,
            react_1.default.createElement(styles_2.GlobalStyles, null),
            react_1.default.createElement("div", { ref: this.containerRef, className: className, role: role }, children)));
    }
}
TooltipComponent.defaultProps = exports.defaultProps;
exports.TooltipComponent = TooltipComponent;
exports.Tooltip = styles_1.styled(TooltipComponent)(styles_2.tooltipStyles, styles_2.getVariant);
//# sourceMappingURL=Tooltip.js.map