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

export default 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;
  /** callback to call when the popover content is requested to be closed (Uncontrolled mode only). NOTE: this callback is called when the close timeout (if exists) starts In Controlled mode - called when the close button is clicked. In Uncontrolled mode - called when the popover is closed */
  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;
  /** @deprecated use skin prop instead
   * @default 'dark'
   */
  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;
}