import type UI from "./UI.js";
import type { ComponentName } from "./types.js";
import type { UIProperties } from "./UI.js";

export interface DefaultUIProperties extends UIProperties, Partial<Pick<DefaultUI, "components">> {}

/**
 * The DefaultUI class exposes the default
 * [Widget](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html) [components](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#components) available in either a
 * [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) or a [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html). This class
 * also provides a simple API for [adding](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#add), [moving](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#move) and [removing](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#remove)
 * [widgets](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html) and other HTML components from the view's UI.
 *
 * You typically don't have to create a new instance of this class since a default instance is
 * available in the `ui` property of the
 * [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html) and [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html).
 *
 * When adding or moving components in the view's UI, you can specify a position. Widgets in
 * the upper region are stacked vertically, while widgets in the lower region are stacked horizontally.
 * The available positions are indicated in the image below.
 *
 * ![views-ui-layout](https://developers.arcgis.com/javascript/latest/assets/img/apiref/views/views-ui-layout.jpg)
 *
 * Methods, such as [add()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#add) and [move()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#move) can be used to place widgets in specific
 * positions of the UI. In the image below, the [Search](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html) and
 * [BasemapToggle](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-BasemapToggle.html) widgets are placed in the view with the [add()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#add)
 * method.
 *
 * ```js
 * let searchWidget = new Search({ view: view });
 * let bmToggleWidget = new BasemapToggle({
 *   view: view,
 *   nextBasemap: "hybrid"
 * });
 *
 * view.ui.add(searchWidget, "top-right");
 * view.ui.add(bmToggleWidget, "bottom-right");
 * ```
 *
 * ![views-ui-demo](https://developers.arcgis.com/javascript/latest/assets/img/apiref/views/views-ui-demo.png)
 *
 * If you dive into the doc of the methods [add()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#add), [empty()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#empty) and [move()](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-DefaultUI.html#move), you'll notice some of the
 * possible values include "leading" and "trailing". That's because the ArcGIS Maps SDK for JavaScript provides
 * bidirectional support.
 *
 * For left-to-right (LTR), "leading" is left and "trailing" is right. For right-to-left (RTL), "leading" is right and "trailing" is left.
 *
 * To enable right-to-left(RTL), set the `dir` attribute in the `<html>` or `<body>` tag to `rtl`.
 *
 * ```js
 * <html dir="rtl">
 * ```
 *
 * @since 4.0
 * @see [SceneView#ui](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html#ui)
 * @see [MapView#ui](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#ui)
 */
export default class DefaultUI extends UI {
  constructor(properties?: DefaultUIProperties);
  /**
   * An array of strings representing the default
   * widgets visible when a [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html) or
   * [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html) is created. The default widgets differ between MapView
   * and SceneView.
   *
   * The following are the default components in each view:
   *
   * **MapView:** `["attribution", "zoom"]`
   *
   * **SceneView:** `["attribution", "navigation-toggle", "compass", "zoom"]`
   *
   * > [!WARNING]
   * >
   * > Esri requires that when you use an ArcGIS Online basemap in your app, the map must include Esri attribution and you must be licensed to use the content.
   * > For detailed guidelines on working with attribution, please visit the official [attribution in your app](https://developers.arcgis.com/terms/attribution/) documentation.
   * > For information on terms of use, see the [Terms of Use FAQ](https://developers.arcgis.com/terms/faq/).
   *
   * @example
   * // Removes all default UI components, except Attribution.
   * // Passing an empty array will remove all components.
   * view.ui.components = [ "attribution" ];
   */
  accessor components: ComponentName[];
}