import * as React from 'react';

export interface ResponsiveProps {
  [key: string]: any;

  /** An element type to render as (string or function). */
  as?: any;

  /** Primary content. */
  children?: React.ReactNode;

  /** Fires callbacks immediately after mount. */
  fireOnMount?: boolean;

  /**
   * Called to get width of screen. Defaults to using `window.innerWidth` when in a browser;
   * otherwise, assumes a width of 0.
   */
  getWidth?: () => number;

  /** The maximum width at which content will be displayed. */
  maxWidth?: number | string;

  /** The minimum width at which content will be displayed. */
  minWidth?: number | string;

  /**
   * Called on update.
   *
   * @param {SyntheticEvent} event - The React SyntheticEvent object
   * @param {object} data - All props and the event value.
   */
  onUpdate?: (event: React.SyntheticEvent<HTMLElement>, data: ResponsiveOnUpdateData) => void;
}

export interface ResponsiveOnUpdateData extends ResponsiveProps {
  width: number;
}

export interface ResponsiveWidthShorthand {
  minWidth?: number | string;
  maxWidth?: number | string;
}

declare class Responsive extends React.Component<ResponsiveProps, {}> {
  static onlyMobile: ResponsiveWidthShorthand;
  static onlyTablet: ResponsiveWidthShorthand;
  static onlyComputer: ResponsiveWidthShorthand;
  static onlyLargeScreen: ResponsiveWidthShorthand;
  static onlyWidescreen: ResponsiveWidthShorthand;
}

export default Responsive;