import { useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Card from "../../Card/index.js";
import useTooltipPosition from './hooks/useTooltipPosition';
import classes from './styles.module.scss';

/**
 * Render a hovering tooltip card that moves with the mouse.
 */
const HoverDisplay = function HoverDisplay(props) {
  const {
    tooltip,
    children,
    zIndex,
    unstyled,
    ...cardProps
  } = props;
  const {
    active
  } = tooltip.config;
  const self = useRef();
  const [x, y] = useTooltipPosition({
    childNode: self,
    active
  });
  const cardContent = <Card shadow="100" edge="2" {...cardProps}>
      {children}
    </Card>;
  return <div ref={self} className={classnames(classes['tooltip-hover-display'], {
    [classes.active]: active
  })} style={{
    top: y,
    left: x,
    zIndex
  }}>
      {unstyled ? children : cardContent}
    </div>;
};
HoverDisplay.defaultProps = {
  children: null,
  zIndex: undefined,
  unstyled: false
};
HoverDisplay.propTypes = {
  /**
   * A tooltip object as provided by `useTooltip`
   */
  tooltip: PropTypes.shape({
    config: PropTypes.shape({
      active: PropTypes.bool
    })
  }).isRequired,
  /**
   * The children to render inside the tooltip
   */
  children: PropTypes.node,
  /**
   * An override for the tooltip's z-index
   */
  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * Prevent default styles from being attached
   */
  unstyled: PropTypes.bool
};
export default HoverDisplay;