import type WebLinkChart from "../WebLinkChart.js";
import type View2D from "./View2D.js";
import type ColorBackground from "../webmap/background/ColorBackground.js";
import type { ScreenPoint } from "../core/types.js";
import type { HitTestOptions, ViewHitTestResult } from "./types.js";
import type { ColorBackgroundProperties } from "../webmap/background/ColorBackground.js";
import type { WebLinkChartProperties } from "../WebLinkChart.js";
import type { View2DProperties } from "./View2D.js";

export interface LinkChartViewProperties extends View2DProperties {
  /**
   * The background color of the LinkChartView. If the view's [map](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#map) changes, the view's `background` is reset to the map's background,
   * even if the user set it previously. If no value is set on the WebLinkChart or the view, the default is white.
   *
   * @default new ColorBackground({ color: [255, 255, 255, 1] })
   * @example
   * let view = new LinkChartView({
   *   container: "viewDiv",
   *   map: map,
   *   background: { // autocasts new ColorBackground()
   *     color: "magenta" // autocasts as new Color()
   *   }
   * });
   * @example
   * let view = new MapView({
   *   container: "viewDiv",
   *   map: map,
   *   background: { // autocasts new ColorBackground()
   *     color: "magenta" // autocasts as new Color()
   *   }
   * });
   */
  background?: ColorBackgroundProperties | null;
  /** The [WebLinkChart](https://developers.arcgis.com/javascript/latest/references/core/WebLinkChart/) displayed in the view. */
  map?: WebLinkChartProperties;
}

/**
 * LinkChartView is a [2D view](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/) that displays a [WebLinkChart](https://developers.arcgis.com/javascript/latest/references/core/WebLinkChart/).
 * A LinkChartView instance must be created to render a WebLinkChart.
 * For a map to be visible to the user in the DOM, a LinkChartView must be created and reference a minimum of two objects:
 * a WebLinkChart instance and a DOM element. Each is set in the [map](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#map) and [container](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#container) properties respectively.
 *
 * @since 4.31
 * @see [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/)
 * @see [WebLinkChart](https://developers.arcgis.com/javascript/latest/references/core/WebLinkChart/)
 * @example
 * // Create a new LinkChartView
 * const view = new LinkChartView({
 *   container: "viewDiv",
 *   map: new WebLinkChart({
 *     portalItem: {
 *       id: "e62b3b3c9e37400d91648fb0a8801e8a",
 *     }
 *   })
 * });
 */
export default class LinkChartView extends View2D {
  constructor(properties?: LinkChartViewProperties);
  /**
   * The background color of the LinkChartView. If the view's [map](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#map) changes, the view's `background` is reset to the map's background,
   * even if the user set it previously. If no value is set on the WebLinkChart or the view, the default is white.
   *
   * @default new ColorBackground({ color: [255, 255, 255, 1] })
   * @example
   * let view = new LinkChartView({
   *   container: "viewDiv",
   *   map: map,
   *   background: { // autocasts new ColorBackground()
   *     color: "magenta" // autocasts as new Color()
   *   }
   * });
   * @example
   * let view = new MapView({
   *   container: "viewDiv",
   *   map: map,
   *   background: { // autocasts new ColorBackground()
   *     color: "magenta" // autocasts as new Color()
   *   }
   * });
   */
  get background(): ColorBackground | null | undefined;
  set background(value: ColorBackgroundProperties | null | undefined);
  /** The [WebLinkChart](https://developers.arcgis.com/javascript/latest/references/core/WebLinkChart/) displayed in the view. */
  get map(): WebLinkChart;
  set map(value: WebLinkChartProperties);
  /**
   * Returns [hit test results](https://developers.arcgis.com/javascript/latest/references/core/views/types/#ViewHitTestResult) from each layer that intersects the specified screen coordinates. The results are
   * organized as an array of objects containing different [result types](https://developers.arcgis.com/javascript/latest/references/core/views/types/#ViewHit).
   *
   * @param screenPoint - The screen coordinates (or native mouse event) of the click on the view.
   * @param options - Options to specify what is included in or excluded from the hitTest. Supported since 4.16.
   * @returns When resolved, returns an array of objects containing different [result types](https://developers.arcgis.com/javascript/latest/references/core/views/types/#ViewHit).
   * @see [Sample: Access features with hitTest](https://developers.arcgis.com/javascript/latest/sample-code/map-component-hittest/)
   * @see [Sample - Access features with hitTest](https://developers.arcgis.com/javascript/latest/sample-code/map-component-hittest/)
   * @see [Sample - Hit test features by screen rectangle](https://developers.arcgis.com/javascript/latest/sample-code/map-hittest-screen-rectangle/)
   * @see [Sample - VectorTileLayer hitTest](https://developers.arcgis.com/javascript/latest/sample-code/layers-vectortilelayer-hittest/)
   * @example
   * // Get the screen point from the view's click event
   * view.on("click", async (event) => {
   *   // Search for all features only on included layers at the clicked location
   *   const response = await view.hitTest(event, { include: [csvLayer, featureLayer] });
   *
   *   // if features are returned from the featureLayer, do something with results
   *   if (response.results.length) {
   *     response.results.forEach((result) => {
   *       if (result.graphic) {
   *         if (isFeatureGraphicOrigin(result.graphic.origin)) {
   *           console.log(result.graphic.origin.layer.title);
   *         } else if (isCSVGraphicOrigin(result.graphic.origin)) {
   *           console.log(result.graphic.origin.layer.longitudeField);
   *         }
   *       }
   *     });
   *   }
   * });
   * @example
   * // Get the screen point from the view's pointer-move event
   * view.on("pointer-move", async (event) => {
   *   // Search for graphics on layers at the hovered location
   *   // Exclude view.graphics from the hitTest
   *   const response = await view.hitTest(event, { exclude: view.graphics });
   *
   *   // if graphics are returned, do something with results
   *   const graphicHits = response.results?.filter(
   *     (hitResult) => hitResult.type === "graphic"
   *   );
   *   if (graphicHits?.length > 0) {
   *      // do something
   *   }
   * });
   * @example
   * // Get the screen point from the view's click event
   * view.on("click", async (event) => {
   *   // Search for all media elements only on included mediaLayer at the clicked location
   *   const response = await view.hitTest(event, { include: mediaLayer });
   *
   *   // if media elements are returned from the mediaLayer, do something with results
   *   if (response.results.length) {
   *      // do something
   *      console.log(response.results.length, "elements returned");
   *   }
   * });
   */
  hitTest(screenPoint: ScreenPoint | MouseEvent, options?: HitTestOptions): Promise<ViewHitTestResult>;
}