import React from 'react';
import PropTypes from 'prop-types';
import ReactTooltip from 'react-tooltip';
import './styles.scss';

const isString = (value) => Object.prototype.toString
  .call(value)
  .includes('String');

const Tooltip = ({
  id,
  place,
  children,
  tip,
  afterShow,
}) => (
  <span
    data-for={id}
    data-tip
    data-place={place}
    data-effect="solid"
    className="Tooltip"
  >
    {children}
    <ReactTooltip
      id={id}
      className="ReactTooltip"
      afterShow={afterShow}
    >
      {isString(tip)
        ? (<div dangerouslySetInnerHTML={{__html: tip}} />)
        : tip}
    </ReactTooltip>
  </span>
);

Tooltip.propTypes = {
  id: PropTypes.string.isRequired,
  tip: PropTypes.node.isRequired,
  place: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
  children: PropTypes.node.isRequired,
  afterShow: PropTypes.func,
};

Tooltip.defaultProps = {
  place: 'top',
  afterShow: undefined,
};

export default Tooltip;