import type { BreakpointOrientation, Breakpoints, BreakpointSize } from "./types.js";

export interface BreakpointsOwnerProperties extends Partial<Pick<BreakpointsOwner, "breakpoints" | "heightBreakpoint" | "widthBreakpoint">> {}

/**
 * A mixin that adds [breakpoints](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints), [heightBreakpoint](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#heightBreakpoint), [orientation](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#orientation) and
 * [widthBreakpoint](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#widthBreakpoint) properties to [View2D](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#breakpoints) and [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html#breakpoints) classes.
 *
 * @since 4.0
 */
export abstract class BreakpointsOwner {
  constructor(...args: any[]);
  /**
   * A convenience property used for defining the breakpoints on the [height](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#height)
   * and [width](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#width) of the view. The sizes specified here determine the values of
   * the [widthBreakpoint](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#widthBreakpoint) and [heightBreakpoint](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#heightBreakpoint)
   * properties depending on the view's size.
   *
   *  Setting up breakpoints can aid in responsive app design. It does this
   *  by watching width and height breakpoints. This is helpful as it removes
   *  the need for multiple [`@media` calls](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries).
   *  Instead of listening for the view's size and/or resizes property,
   *  you can set up a watch handler for either the  [widthBreakpoint](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#widthBreakpoint) or
   *  [heightBreakpoint](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#heightBreakpoint) properties of the view.
   *
   * > [!WARNING]
   * >
   * > Please refer to the [styling guide](https://developers.arcgis.com/javascript/latest/styling/#view-size-css-classes) for additional
   * > information on working with this.
   *
   * @see [Sample: Responsive apps using CSS](https://developers.arcgis.com/javascript/latest/sample-code/view-breakpoints-css/)
   * @see [MDN Web docs: Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries)
   * @example
   * // Instead of watching the size or resizing properties
   * reactiveUtils.watch(() => view.size, () => {});
   * reactiveUtils.watch(() => view.resizing, () => {});
   *
   * // Set up a watch handle for breakpoint
   * reactiveUtils.watch(
   *   () => view.widthBreakpoint,
   *   (breakpoint) => {
   *     switch (breakpoint) {
   *       case "xsmall":
   *       // do something
   *         break;
   *       case "small":
   *       case "medium":
   *       case "large":
   *       case "xlarge":
   *       // do something else
   *         break;
   *       default:
   *     }
   *   }
   * );
   */
  accessor breakpoints: Breakpoints;
  /**
   * A convenience property indicating the general size of the view's height. This value is
   * determined based on where the view's [height](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#height) falls in the ranges defined
   * in the [breakpoints](#breakpoints) property. See the table below
   * for a list of possible values. Use the [breakpoints](#breakpoints) property to
   * override the default thresholds.
   *
   * > [!WARNING]
   * >
   * > Please refer to the [styling guide](https://developers.arcgis.com/javascript/latest/styling/#view-size-css-classes) for additional
   * > information on working with this.
   *
   * Possible Value | Description | Default thresholds (pixels)
   * ---------------|-------------|----------------------------
   * xsmall | The [height](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#height) of the view is smaller than the value set in the `xsmall` [breakpoint](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints). | < 545
   * small | The [height](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#height) of the view is between the values set in the `xsmall` and `small` [breakpoints](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints). | 545 - 768
   * medium | The [height](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#height) of the view is between the values set in the `small` and `medium` [breakpoints](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints). | 769 - 992
   * large | The [height](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#height) of the view is between the values set in the `medium` and `large` [breakpoints](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints). | 993 - 1200
   * xlarge | The [height](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#height) of the view is larger than the value set in the `large` [breakpoint](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints). | > 1200
   *
   * @see [Sample: Responsive widgets](https://developers.arcgis.com/javascript/latest/sample-code/view-breakpoints/)
   * @see [Sample: Responsive apps using CSS](https://developers.arcgis.com/javascript/latest/sample-code/view-breakpoints-css/)
   * @example
   * reactiveUtils.watch(
   *   () => view.heightBreakpoint === "xsmall",
   *   () => {
   *     // clear the view's default UI components if
   *     // the app is used on a mobile device
   *     view.ui.components = [];
   *   }
   * );
   */
  accessor heightBreakpoint: BreakpointSize;
  /**
   * A convenience property indicating the view's orientation. See the table below for a list of possible values.
   *
   * > [!WARNING]
   * >
   * > Please refer to the [styling guide](https://developers.arcgis.com/javascript/latest/styling/#view-size-css-classes) for additional
   * > information on working with this.
   *
   * Possible Value | Description
   * ---------------|------------
   * landscape | The [width](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#width) of the view is greater than its [height](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#height).
   * portrait | The [width](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#width) of the view is equal to or smaller than its [height](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#height).
   */
  get orientation(): BreakpointOrientation;
  /**
   * A convenience property indicating the general size of the view's width. This value is
   * determined based on where the view's [width](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#width) falls in the ranges defined
   * in the [breakpoints](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints) property. See the table below
   * for a list of possible values. Use the [breakpoints](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints) property to
   * override the default thresholds.
   *
   * > [!WARNING]
   * >
   * > Please refer to the [styling guide](https://developers.arcgis.com/javascript/latest/styling/#view-size-css-classes) for additional
   * > information on working with this.
   *
   * Possible Value | Description | Default thresholds (pixels)
   * ---------------|-------------|-------------------
   * xsmall | The [width](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#width) of the view is smaller than the value set in the `xsmall` [breakpoint](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints). | < 545
   * small | The [width](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#width) of the view is between the values set in the `xsmall` and `small` [breakpoints](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints). | 545 - 768
   * medium | The [width](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#width) of the view is between the values set in the `small` and `medium` [breakpoints](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints). | 769 - 992
   * large | The [width](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#width) of the view is between the values set in the `medium` and `large` [breakpoints](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints). | 993 - 1200
   * xlarge | The [width](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View2D.html#width) of the view is larger than the value set in the `large` [breakpoint](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-BreakpointsOwner.html#breakpoints). | > 1200
   *
   * @see [Sample: Responsive apps using CSS](https://developers.arcgis.com/javascript/latest/sample-code/view-breakpoints-css/)
   * @example
   * reactiveUtils.when(
   *   () => view.widthBreakpoint === "xsmall",
   *   () => {
   *     // clear the view's default UI components if
   *     // the app is used on a mobile device
   *     view.ui.components = [];
   *   }
   * );
   */
  accessor widthBreakpoint: BreakpointSize;
}