import * as React from 'react';
import { FloatingHelperContent } from './FloatingHelperContent';
import { MoveByOffset } from '../common';
import { AppendTo, Placement } from '../Popover';

export class FloatingHelper extends React.PureComponent<FloatingHelperProps> {
  open: () => void;
  close: () => void;
  static Content: typeof FloatingHelperContent;
}

export type FloatingHelperSkin = 'dark' | 'light';
export type FloatingHelperAppearance = FloatingHelperSkin;
export type FloatingHelperPlacement = Placement;
export type FloatingHelperAppendTo = AppendTo;
export type FloatingHelperMoveByOffset = MoveByOffset;

export interface FloatingHelperProps {
  children?: React.ReactNode;
  /** Applied as data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /** Width HTML attribute of the content. If a number is passed then it defaults to px. e.g width={400} => width="400px"
   * @default '444px'
   */
  width?: string | number;
  /** The target of the popover. */
  target: React.ReactNode;
  /** A `<FloatingHelper.Content>` component. */
  content: React.ReactNode;
  /** Defines a callback function which is called when the popover content is requested to be closed. In controlled mode, it's called when the close button is clicked. In uncontrolled mode, it's called after the popover closes. */
  onClose?: () => void;
  /** Callback to call when the popover content is requested to be opened (Uncontrolled mode only)*/
  onOpen?: () => void;
  /** Skin : `dark` or `light` */
  skin?: FloatingHelperSkin;
  /** Controls the skin of the floating helper when `skin` isn't set.
   * @deprecated Use `skin` instead.
   */
  appearance?: FloatingHelperAppearance;
  /** Controls whether the popover's content is initially opened (In Uncontrolled mode only)
   * @default true
   */
  initiallyOpened?: boolean;
  /** Controls whether the popover's content is shown or not (aka Controlled mode).
   * When undefined, then the component is Uncontrolled. See open/close behaviour section in docs. */
  opened?: boolean;
  /** Floating helper z-index. */
  zIndex?: number;
  /** Enables calculations in relation to a dom element.
   * @default 'window'
   */
  appendTo?: FloatingHelperAppendTo;
  /** The location to display the content. */
  placement: FloatingHelperPlacement;
  /** Moves the floating helper relative to the parent by x or y. */
  moveBy?: FloatingHelperMoveByOffset;
  /** Set a delay on closing. */
  hideDelay?: number;
}