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

export type PopperPlacement =
  | 'auto-start'
  | 'auto'
  | 'auto-end'
  | 'top-start'
  | 'top'
  | 'top-end'
  | 'right-start'
  | 'right'
  | 'right-end'
  | 'bottom-end'
  | 'bottom'
  | 'bottom-start'
  | 'left-end'
  | 'left'
  | 'left-start';

export const popperPlacementPropTypes = PropTypes.oneOf([
  'auto-start',
  'auto',
  'auto-end',
  'top-start',
  'top',
  'top-end',
  'right-start',
  'right',
  'right-end',
  'bottom-end',
  'bottom',
  'bottom-start',
  'left-end',
  'left',
  'left-start',
]);

type ReferenceArgs = {
  ref: (?HTMLElement) => void,
  referenceProps?: {
    'aria-describedby': string,
  },
};

type ChildrenArgs = {
  ref: (?HTMLElement) => void,
  style: $Shape<CSSStyleDeclaration>,
  placement: PopperPlacement,
  arrowProps: PopperArrowProps,
  popperId: string,
};

export type PopperProps = {
  reference: ReferenceArgs => Node,
  placement: PopperPlacement,
  children: ChildrenArgs => Node,
  isVisible?: boolean,
};

export const popperPropTypes = {
  reference: PropTypes.func.isRequired,
  children: PropTypes.func.isRequired,
  placement: popperPlacementPropTypes,
  isVisible: PropTypes.bool,
};
