import type Color from "../Color.js";
import type FillSymbol from "./FillSymbol.js";
import type { ColorLike } from "../Color.js";
import type { FillSymbolProperties } from "./FillSymbol.js";

export interface SimpleFillSymbolProperties extends FillSymbolProperties, Partial<Pick<SimpleFillSymbol, "style">> {
  /**
   * The color of the symbol.
   * This can be autocast with an array of rgb(a) values, named string, hex string or an hsl(a) string,
   * an object with `r`, `g`, `b`, and `a` properties, or a [Color](https://developers.arcgis.com/javascript/latest/api-reference/esri-Color.html) object.
   *
   * @default [0, 0, 0, 0.25] - black, semitransparent
   * @example
   * // CSS color string
   * symbol.color = "dodgerblue";
   * @example
   * // HEX string
   * symbol.color = "#33cc33";
   * @example
   * // array of RGBA values
   * symbol.color = [51, 204, 51, 0.3];
   * @example
   * // object with rgba properties
   * symbol.color = {
   *   r: 51,
   *   g: 51,
   *   b: 204,
   *   a: 0.7
   * };
   * @example
   * // CSS color string
   * symbol.color = "dodgerblue";
   * @example
   * // HEX string
   * symbol.color = "#33cc33";
   * @example
   * // array of RGBA values
   * symbol.color = [51, 204, 51, 0.3];
   * @example
   * // object with rgba properties
   * symbol.color = {
   *   r: 51,
   *   g: 51,
   *   b: 204,
   *   a: 0.7
   * };
   */
  color?: ColorLike;
}

/**
 * SimpleFillSymbol is used for rendering 2D polygons 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). It can be filled with a solid [color](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html#color),
 * or a [pattern](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html#style). In addition, the symbol can have an optional [outline](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html#outline),
 * which is defined by a [SimpleLineSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html).
 *
 * SimpleFillSymbols may be applied to polygon features in a [FeatureLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html)
 * or an individual [Graphic](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html).
 *
 * Fill symbols may also be used to symbolize 2D polygon features
 * in a 3D [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html). However, it is
 * recommended you use [PolygonSymbol3D](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PolygonSymbol3D.html) instead. The image below
 * depicts a [FeatureLayer](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html) whose graphics
 * are styled with a SimpleFillSymbol.
 *
 * [![sfs-sample](https://developers.arcgis.com/javascript/latest/assets/img/apiref/symbols/symbols-sfs-sample.png)](https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-color/)
 *
 * @since 4.0
 * @see [Symbol Builder](https://developers.arcgis.com/javascript/latest/visualization/symbols-color-ramps/symbol-builder/)
 * @see [Sample - Continuous color](https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-color/)
 * @see [Sample - Add graphics (MapView)](https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/)
 * @see [Graphic](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html)
 * @see [Renderer](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-Renderer.html)
 * @example
 * let symbol = {
 *   type: "simple-fill",  // autocasts as new SimpleFillSymbol()
 *   color: [ 51,51, 204, 0.9 ],
 *   style: "solid",
 *   outline: {  // autocasts as new SimpleLineSymbol()
 *     color: "white",
 *     width: 1
 *   }
 * };
 */
export default class SimpleFillSymbol extends FillSymbol {
  constructor(properties?: SimpleFillSymbolProperties);
  /**
   * The color of the symbol.
   * This can be autocast with an array of rgb(a) values, named string, hex string or an hsl(a) string,
   * an object with `r`, `g`, `b`, and `a` properties, or a [Color](https://developers.arcgis.com/javascript/latest/api-reference/esri-Color.html) object.
   *
   * @default [0, 0, 0, 0.25] - black, semitransparent
   * @example
   * // CSS color string
   * symbol.color = "dodgerblue";
   * @example
   * // HEX string
   * symbol.color = "#33cc33";
   * @example
   * // array of RGBA values
   * symbol.color = [51, 204, 51, 0.3];
   * @example
   * // object with rgba properties
   * symbol.color = {
   *   r: 51,
   *   g: 51,
   *   b: 204,
   *   a: 0.7
   * };
   * @example
   * // CSS color string
   * symbol.color = "dodgerblue";
   * @example
   * // HEX string
   * symbol.color = "#33cc33";
   * @example
   * // array of RGBA values
   * symbol.color = [51, 204, 51, 0.3];
   * @example
   * // object with rgba properties
   * symbol.color = {
   *   r: 51,
   *   g: 51,
   *   b: 204,
   *   a: 0.7
   * };
   */
  get color(): Color;
  set color(value: ColorLike);
  /**
   * The fill style.
   * Possible values are listed in the table below:
   *
   * Value | Description
   * ------|-------------
   * backward-diagonal | ![sfs-backward-diagonal](https://developers.arcgis.com/javascript/latest/assets/img/apiref/symbols/symbols-sfs-backward-diagonal.png)
   * cross | ![sfs-cross](https://developers.arcgis.com/javascript/latest/assets/img/apiref/symbols/symbols-sfs-cross.png)
   * diagonal-cross | ![sfs-diagonal-cross](https://developers.arcgis.com/javascript/latest/assets/img/apiref/symbols/symbols-sfs-diagonal-cross.png)
   * forward-diagonal | ![sfs-forward-diagonal](https://developers.arcgis.com/javascript/latest/assets/img/apiref/symbols/symbols-sfs-forward-diagonal.png)
   * horizontal | ![sfs-horizontal](https://developers.arcgis.com/javascript/latest/assets/img/apiref/symbols/symbols-sfs-horizontal.png)
   * none | The polygon has no fill.
   * solid | ![sfs-solid](https://developers.arcgis.com/javascript/latest/assets/img/apiref/symbols/symbols-sfs-solid.png)
   * vertical | ![sfs-vertical](https://developers.arcgis.com/javascript/latest/assets/img/apiref/symbols/symbols-sfs-vertical.png)
   *
   * @default "solid"
   */
  accessor style: "solid" | "none" | "horizontal" | "vertical" | "forward-diagonal" | "backward-diagonal" | "cross" | "diagonal-cross";
  /** The symbol type. */
  get type(): "simple-fill";
  /**
   * Creates a deep clone of the symbol.
   *
   * @returns A deep clone of the object that
   *                                             invoked this method.
   * @example
   * // Creates a deep clone of the graphic's symbol
   * let symLyr = graphic.symbol.clone();
   */
  clone(): SimpleFillSymbol;
}