// @flow
import { type Node } from 'react';
import PropTypes from 'prop-types';
import type { PopperArrowProps } from 'react-popper';

import {
  popperPlacementPropTypes,
  type PopperPlacement,
} from '../popper/popper.proptypes';

import { type TranslatedContent } from '../../../types';

export type ReferenceArgs = {
  ref: (?HTMLElement) => void,
  referenceProps?: {
    onMouseEnter?: () => void,
    onMouseLeave?: () => void,
    onFocus?: () => void,
    onBlur?: () => void,
  },
};

export type TooltipProps = {
  reference: ReferenceArgs => Node,
  placement: PopperPlacement,
  children: TranslatedContent | Node,
  isVisible?: boolean,
};

export const tooltipPropTypes = {
  reference: PropTypes.func.isRequired,
  children: PropTypes.node.isRequired,
  placement: popperPlacementPropTypes,
};

export type TooltipViewProps = {
  placement: PopperPlacement,
  popperId: string,
  arrowProps: PopperArrowProps,
  ref: (?HTMLElement) => void,
  style: CSSStyleDeclaration,
  children: Node | TranslatedContent,
};
