import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
import ReactTooltip from 'react-tooltip';
import Icon from '../../visuals/Icon';
import isTouch from '../../utils/isTouch';

/**
 * This Tooltip is build on top off react-tooltip.
 * Documentation: https://github.com/wwayne/react-tooltip
 * Examples: https://react-tooltip.netlify.com/
 */
class Tooltip extends Component {
  static propTypes = {
    /**
     * If provided the Tooltip will be bound to this icon.
     * If not provided one must add the relevant data attributes to the element, the Tooltip should be bound too.
     * See md file for example.
     */
    icon: PropTypes.any,
    /**
     * The message of the tooltip if you do not want to display a component.
     * Content prop should not be passed if you want to only display a string message.
     */
    message: PropTypes.string,
    /**
     * A component or JSX which can be displayed instead of a message.
     * Passing content will always take priority over a message as data-tip will be true.
     */
    content: PropTypes.node,
    /**
     * A unique name. It will be used as the id of the Tooltip and the data-for attribute on the Icon.
     */
    name: PropTypes.string.isRequired,
    /**
     * If you want to force the Tooltip to show on click for none touch devices you can set this true.
     */
    forceDataEventClick: PropTypes.bool,
    /**
     * If you have set forceDataEventClicktrue and you want the tooltip to hide on mouseout set this true
     */
    hideOnMouseOut: PropTypes.bool,
  };
  static defaultProps = {
    icon: null,
    message: null,
    forceDataEventClick: false,
    hideOnMouseOut: false,
    content: null,
  };

  render() {
    const { icon, message, name, content, forceDataEventClick, hideOnMouseOut } = this.props;
    const dataEvent = isTouch() || forceDataEventClick ? 'click' : null;
    const dataEventOff = forceDataEventClick && hideOnMouseOut ? 'mouseout' : null;
    return (
      <div className="Tooltip-wrapper">
        {icon && (
          <Icon
            icon={icon}
            data-tip={Boolean(content) || message}
            data-event={dataEvent}
            data-event-off={dataEventOff}
            data-place="bottom"
            data-for={name}
            className="Tooltip-Icon"
          />
        )}
        <ReactTooltip
          globalEventOff="click"
          effect="solid"
          place="right"
          type="light"
          className="Tooltip"
          id={name}
          multiline
        >
          {content}
        </ReactTooltip>
      </div>
    );
  }
}

export default Tooltip;