import * as React from 'react';

export type ModalPreviewLayoutSkin = 'dark' | 'light';

export interface ModalPreviewLayoutProps {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook?: string;
  /** component to be displayed in header strip to preform actions relevant to the displayed content */
  actions?: React.ReactNode;
  /** title text to be displayed in the header strip */
  title?: string;
  /** modal content displayed mid-screen*/
  children: React.ReactNode;
  /** callback for when the modal is closed */
  onClose: () => void;
  /** boolean to determine whether closing the overlay on click
   * @default true
   */
  shouldCloseOnOverlayClick?: boolean;
  /** Tooltip close button text */
  closeButtonTooltipText?: string;
  /** ARIA label for close button */
  closeButtonAriaLabel?: string;
  /** Previous button props
   * ##### onClick signature:
   * function(childIndexDisplayed: number) => void
   * * `childIndexDisplayed`: the index of the child component displayed.
   */
  prevButtonProps?: PrevButtonProps;
  /** Next button props
   * ##### onClick signature:
   * function(childIndexDisplayed: number) => void
   * * `childIndexDisplayed`: the index of the child component displayed.
   */
  nextButtonProps?: NextButtonProps;
  /** Controls the skin of the component
   * @default 'dark'
   */
  skin?: ModalPreviewLayoutSkin;
  /**
   * Pass an index to start rendering from a specific child component.
   * @default 0
   */
  startDisplayingAtChildIndex?: number;
}

export type PrevButtonProps = {
  onClick?: (childIndexDisplayed: number) => {};
  tooltipText?: React.ReactNode;
};

export type NextButtonProps = {
  onClick?: (childIndexDisplayed: number) => {};
  tooltipText?: React.ReactNode;
};

export default class ModalPreviewLayout extends React.PureComponent<ModalPreviewLayoutProps> {}