import PropTypes from 'prop-types';
import HoverDisplay from './HoverDisplay';
import DrawerDisplay from './DrawerDisplay';
import TooltipContent from './TooltipContent';

/**
 * **Note:** if you haven't read [the basic `Tooltip` documentation][tooltip],
 * you should read through that first. This component is the _display_
 * component of a tooltip, which you only need if you're using an advanced
 * tooltip.
 *
 * This component is a tooltip display container. This is what you normally
 * think of as the tooltip itself. It will render either as a hovering card or
 * as a drawer at the bottom of the screen, depending on screen size. The
 * content of the tooltip is specified by the tooltip object passed in as the
 * `tooltip` prop. If you want to use one tooltip display element for multiple
 * tooltip targets you should render one `TooltipDisplay` component and many
 * `TooltipTrigger` components, passing them all the same `tooltip` object
 * returned from one call of the `useTooltip` hook. That would be a good
 * approach if, say, you have many path nodes in an SVG and you want each path
 * to trigger the same tooltip with unique content.
 *
 * By default the `TooltipDisplay` renders [a `Card` component][card] under the
 * hood and all extra props are forwarded to the card, so you can customize the
 * color, corner roundness, border, shadow, padding, and so on just like you
 * would with a normal card.
 *
 * For more examples on how to use the `TooltipDisplay` component in the
 * context of an advanced tooltip, check out [the advanced tooltip
 * stories][advanced-tooltip].
 *
 * ```js
 *
 * import { TooltipDisplay } from '@politico/interactive-style';
 * ```
 *
 * [tooltip]: ./?path=/docs/components-structure-tooltip--basic-tooltip-text
 * [card]: ./?path=/docs/components-structure-card--basic
 * [advanced-tooltip]: ./?path=/docs/components-structure-tooltip--advanced-tooltip-shared-component-type
 */
const TooltipDisplay = function TooltipDisplay(props) {
  const {
    tooltip,
    zIndex,
    unstyled,
    ...forwardProps
  } = props;
  if (!tooltip) return null;
  const {
    content,
    props: childProps,
    isDesktop,
    active,
    displayProps = {}
  } = tooltip.config;
  const WrapperComponent = isDesktop ? HoverDisplay : DrawerDisplay;
  return <WrapperComponent tooltip={tooltip} zIndex={zIndex} unstyled={unstyled} {...forwardProps} {...displayProps}>
      <TooltipContent active={active} content={content} props={childProps} />
    </WrapperComponent>;
};
TooltipDisplay.defaultProps = {
  tooltip: undefined,
  zIndex: undefined,
  unstyled: false
};
TooltipDisplay.propTypes = {
  /**
   * A tooltip object as provided by the `useTooltip` hook
   */
  tooltip: PropTypes.shape({
    config: PropTypes.shape({
      content: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
      props: PropTypes.shape({}),
      isDesktop: PropTypes.bool,
      active: PropTypes.bool,
      displayProps: PropTypes.shape({})
    })
  }),
  /**
   * An inline override for the tooltip's z-index. By default the tooltip's
   * z-index is set to 30 in the tooltip's stylesheet.
   */
  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  /**
   * By default, a tooltip renders its contents inside a `Card` component and
   * it forwards any extra props to the `Card`. Setting the `unstyled` prop
   * prevents this, causing the tooltip to render its content as-is without any
   * decorative wrapper. Setting the `unstyled` prop also causes extra props to
   * be ignored since there is no `Card` to forward them to.
   */
  unstyled: PropTypes.bool
};
export default TooltipDisplay;