// @flow
import type { Node } from 'react';
import type { PopperArrowProps } from 'react-popper';
import type {
  PopperPlacement,
  ReferenceProps as PopperReferenceProps,
} from '../popper/popper.proptypes';
import type { TranslatedContent } from '../../../types';
import type { SpaceProps } from '../../../mixins/spacing';
import type { StackedProps } from '../../../mixins/stacking';
import type { AriaProps } from '../../../mixins/aria';

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

export type TooltipProps = {|
  ...SpaceProps,
  ...StackedProps,
  ...AriaProps,
  reference: (ReferenceArgs) => Node,
  placement: PopperPlacement,
  children: TranslatedContent | Node,
  isVisible?: boolean,
|};

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