import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import ReactTooltip from 'react-tooltip';

import './tooltip.scss';

class Tooltip extends PureComponent {
  static propTypes = {
    placement: PropTypes.string,
    children: PropTypes.node,
    overlay: PropTypes.oneOfType([
      PropTypes.node,
      PropTypes.string
    ]),
    component: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object,
      PropTypes.func
    ]),
    type: PropTypes.string,
    effect: PropTypes.string,
    mouseEnterDelay: PropTypes.number,
    delayHide: PropTypes.number,
    className: PropTypes.string
  };

  static defaultProps = {
    component: 'span',
    placement: 'top',
    overlay: null,
    children: null,
    type: 'dark',
    effect: 'solid',
    mouseEnterDelay: 0.15,
    delayHide: 150,
    className: undefined
  };

  render() {
    const {
      placement,
      overlay,
      children,
      mouseEnterDelay,
      delayHide,
      component: Component,
      type,
      effect,
      className,
      ...rest
    } = this.props;
    const { _mountOrder, _rootNodeID } = this._reactInternalInstance;

    return (
      <Component
        data-for={`_${_rootNodeID}-${_mountOrder}`}
        data-tip=""
        className={className}
        {...rest}
      >
        {children}
        <ReactTooltip
          mouseEnterDelay={mouseEnterDelay}
          place={placement}
          id={`_${_rootNodeID}-${_mountOrder}`}
          effect={effect}
          type={type}
          delayHide={delayHide}
          {...rest}
        >
          {overlay}
        </ReactTooltip>
      </Component>
    );
  }
}


export default Tooltip;
