import * as React from 'react';

export enum AreaY {
  TOP = 'top',
  MIDDLE = 'middle',
  BOTTOM = 'bottom',
  NONE = 'none',
}

export enum AreaX {
  START = 'start',
  MIDDLE = 'middle',
  END = 'end',
  NONE = 'none',
}
export interface ScrollAreaData {
  area: {
    x: AreaX;
    y: AreaY;
  };
  target: HTMLElement;
}

export interface ScrollableContainerProps {
  className?: string;
  dataHook?: string;
  scrollThrottleWait?: number;
  /** A Handler for scroll area changes, will trigger only when the user scrolls to a different area of
   * the container, see signature for possible areas
   *
   * ##### Signature:
   * `function({area: {y: AreaY, x: AreaX}, target: HTMLElement}) => void`
   *
   * `AreaY`: top | middle | bottom | none
   *
   * `AreaX`: start | middle | end | none (not implemented yet)
   */
  onScrollAreaChanged?(scrollChangedData: ScrollAreaData): void;
  /** A Generic Handler for scroll changes with throttling
   * ##### Signature:
   * function({target: HTMLElement}) => void
   */
  onScrollChanged?(target: HTMLElement): void;
  ref?: React.LegacyRef<HTMLDivElement>;
  children?: React.ReactNode;
  style?: React.CSSProperties;
}

declare const ScrollableContainer: React.FunctionComponent<ScrollableContainerProps>;
export default ScrollableContainer;