import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cn from "classnames";
import React from "react";
import { Wrapper, ContentWrapper } from "./tooltip.styled";
import { Info as InfoImg } from "./img/info";
import enhanceWithClickOutside from "react-click-outside";
class Tooltip extends React.PureComponent {
    state = { isOpen: false };
    openModal = (e) => {
        e.stopPropagation();
        this.setState({ isOpen: true });
    };
    closeModal = (e) => {
        e.stopPropagation();
        this.setState({ isOpen: false });
    };
    handleClickOutside() {
        this.setState({ isOpen: false });
    }
    render() {
        return (_jsxs(Wrapper, { as: this.props.as, className: cn("ui-tooltip-base__container-marker", this.props.className), onClick: this.props.openOn === "click" ? this.openModal : this.props.onClick, onMouseEnter: this.props.openOn === "hover" ? this.openModal : undefined, onMouseLeave: this.props.openOn === "hover" ? this.closeModal : undefined, children: [(this.state.isOpen || this.props.open) && (_jsx(ContentWrapper, { bottom: this.props.bottom, right: this.props.right, backgroundColor: this.props.backgroundColor, borderColor: this.props.borderColor, padding: this.props.contentPadding, as: this.props.as, className: "ui-tooltip-base__container-content", children: this.props.content })), this.props.children ?? (_jsx(InfoImg, { className: "ui-tooltip-base__default-marker" }))] }));
    }
}
export default enhanceWithClickOutside(Tooltip);
//# sourceMappingURL=tooltip.js.map