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

export interface PictureFillSymbolProperties extends FillSymbolProperties, Partial<Pick<PictureFillSymbol, "url" | "xscale" | "yscale">> {
  /**
   * The height of the image in points. This value may be autocast with a string
   * expressing size in points or pixels (e.g. `12px`).
   *
   * @default 12
   * @example
   * // height in points
   * symbol.height = 16;
   * @example
   * // height in pixels
   * symbol.height = "12px";
   * @example
   * // height in points
   * symbol.height = "16pt";
   */
  height?: number | string;
  /**
   * The width of the image in points. This value may be autocast with a string
   * expressing size in points or pixels (e.g. `12px`).
   *
   * @default 12
   * @example
   * // width in points
   * symbol.width = 16;
   * @example
   * // width in pixels
   * symbol.width = "12px";
   * @example
   * // width in points
   * symbol.width = "16pt";
   */
  width?: number | string;
  /**
   * The offset on the x-axis in points. This value may be autocast with a string
   * expressing size in points or pixels (e.g. `12px`).
   *
   * @default 0
   * @example
   * // xoffset in points
   * symbol.xoffset = 6;
   * @example
   * // xoffset in pixels
   * symbol.xoffset = "8px";
   * @example
   * // xoffset in points
   * symbol.xoffset = "6pt";
   */
  xoffset?: number | string;
  /**
   * The offset on the y-axis in pixels or points. This value may be autocast with a string
   * expressing size in points or pixels (e.g. `12px`).
   *
   * @default 0
   * @example
   * // yoffset in points
   * symbol.yoffset = 6;
   * @example
   * // yoffset in pixels
   * symbol.yoffset = "8px";
   * @example
   * // yoffset in points
   * symbol.yoffset = "6pt";
   */
  yoffset?: number | string;
}

/**
 * PictureFillSymbol uses an image in a repeating pattern to symbolize polygon features in a
 * 2D [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html). A [url](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PictureFillSymbol.html#url) must point to a valid image.
 * In addition, the symbol can have an optional [outline](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-PictureFillSymbol.html#outline), which is defined by a
 * [SimpleLineSymbol](https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html). PictureFillSymbols 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).
 *
 * PictureFillSymbol is not supported in 3D [SceneView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html). Only use it when
 * working in a [MapView](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html).
 *
 * The image below depicts a [Graphic](https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html) that is styled with a PictureFillSymbol.
 *
 * ![pfs-sample](https://developers.arcgis.com/javascript/latest/assets/img/apiref/symbols/symbols-pfs-sample.png)
 *
 * @since 4.0
 * @see [Symbol Builder](https://developers.arcgis.com/javascript/latest/visualization/symbols-color-ramps/symbol-builder/)
 * @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: "picture-fill",  // autocasts as new PictureFillSymbol()
 *   url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
 *   width: "24px",
 *   height: "24px",
 *   outline: {
 *     style: "solid"
 *   },
 * };
 */
export default class PictureFillSymbol extends FillSymbol {
  constructor(properties?: PictureFillSymbolProperties);
  /**
   * The height of the image in points. This value may be autocast with a string
   * expressing size in points or pixels (e.g. `12px`).
   *
   * @default 12
   * @example
   * // height in points
   * symbol.height = 16;
   * @example
   * // height in pixels
   * symbol.height = "12px";
   * @example
   * // height in points
   * symbol.height = "16pt";
   */
  get height(): number;
  set height(value: number | string);
  /** The symbol type. */
  get type(): "picture-fill";
  /** The URL to the image. */
  accessor url: string | null | undefined;
  /**
   * The width of the image in points. This value may be autocast with a string
   * expressing size in points or pixels (e.g. `12px`).
   *
   * @default 12
   * @example
   * // width in points
   * symbol.width = 16;
   * @example
   * // width in pixels
   * symbol.width = "12px";
   * @example
   * // width in points
   * symbol.width = "16pt";
   */
  get width(): number;
  set width(value: number | string);
  /**
   * The offset on the x-axis in points. This value may be autocast with a string
   * expressing size in points or pixels (e.g. `12px`).
   *
   * @default 0
   * @example
   * // xoffset in points
   * symbol.xoffset = 6;
   * @example
   * // xoffset in pixels
   * symbol.xoffset = "8px";
   * @example
   * // xoffset in points
   * symbol.xoffset = "6pt";
   */
  get xoffset(): number;
  set xoffset(value: number | string);
  /**
   * The scale factor on the x axis of the symbol.
   *
   * @default 1
   */
  accessor xscale: number;
  /**
   * The offset on the y-axis in pixels or points. This value may be autocast with a string
   * expressing size in points or pixels (e.g. `12px`).
   *
   * @default 0
   * @example
   * // yoffset in points
   * symbol.yoffset = 6;
   * @example
   * // yoffset in pixels
   * symbol.yoffset = "8px";
   * @example
   * // yoffset in points
   * symbol.yoffset = "6pt";
   */
  get yoffset(): number;
  set yoffset(value: number | string);
  /**
   * The scale factor on the y axis of the symbol.
   *
   * @default 1
   */
  accessor yscale: number;
  /**
   * 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 sym = graphic.symbol.clone();
   */
  clone(): PictureFillSymbol;
}