import type Color from "../Color.js";
import type { JSONSupport } from "../core/JSONSupport.js";
import type { LineMarkerStyle, LineMarkerPlacement } from "./types.js";
import type { ColorLike } from "../Color.js";

export interface LineSymbolMarkerProperties extends Partial<Pick<LineSymbolMarker, "placement" | "style">> {
  /** The color of the marker. If not specified, the marker will match the color of the line. */
  color?: ColorLike;
}

/**
 * LineSymbolMarker is used for rendering a simple marker graphic on a [SimpleLineSymbol](https://developers.arcgis.com/javascript/latest/references/core/symbols/SimpleLineSymbol/).
 * Markers can enhance the cartographic information of a line
 * by providing additional visual cues about the associated feature.
 *
 * If you are in a 3D [SceneView](https://developers.arcgis.com/javascript/latest/references/core/views/SceneView/) use a [LineSymbol3DLayer](https://developers.arcgis.com/javascript/latest/references/core/symbols/LineSymbol3DLayer/)
 * which has support for [LineStyleMarker3D](https://developers.arcgis.com/javascript/latest/references/core/symbols/LineStyleMarker3D/).
 *
 * @since 4.16
 * @see [Symbol Builder](https://developers.arcgis.com/javascript/latest/symbol-builder/)
 * @see [Renderer](https://developers.arcgis.com/javascript/latest/references/core/renderers/Renderer/)
 * @see [Graphic](https://developers.arcgis.com/javascript/latest/references/core/Graphic/)
 * @example
 * const lineSymbol = new SimpleLineSymbol({
 *    color: "gray",
 *    width: 1.5,
 *    // Define a blue "x" marker at the beginning of the line
 *    marker: { // autocasts from LineSymbolMarker
 *       style: "x",
 *       color: "blue",
 *       placement: "begin"
 *    }
 * });
 */
export default class LineSymbolMarker extends JSONSupport {
  /**
   * @example
   * const lineSymbolMarker = new LineSymbolMarker({
   *   color: "blue",
   *   placement: "begin-end",
   *   style: "arrow"
   * });
   */
  constructor(properties?: LineSymbolMarkerProperties);
  /** The color of the marker. If not specified, the marker will match the color of the line. */
  get color(): Color;
  set color(value: ColorLike);
  /**
   * The placement of the marker(s) on the line. Possible values are listed in the table below.
   *
   * Value  | Description
   * -------|---------------
   * begin  | Single marker at the start of the line
   * end    | Single marker at the end of the line
   * begin-end | Two markers, one at the start and one at the end of the line
   *
   * @default "begin-end"
   */
  accessor placement: LineMarkerPlacement;
  /**
   * The marker style. Possible values are listed in the table below.
   *
   * Value  | Example
   * -------|--------
   * arrow  | ![lsm-arrow](https://developers.arcgis.com/javascript/latest/assets/references/core/symbols/symbols-lsm-arrow.png)
   * circle | ![lsm-circle](https://developers.arcgis.com/javascript/latest/assets/references/core/symbols/symbols-lsm-circle.png)
   * square | ![lsm-square](https://developers.arcgis.com/javascript/latest/assets/references/core/symbols/symbols-lsm-square.png)
   * diamond| ![lsm-diamond](https://developers.arcgis.com/javascript/latest/assets/references/core/symbols/symbols-lsm-diamond.png)
   * cross  | ![lsm-cross](https://developers.arcgis.com/javascript/latest/assets/references/core/symbols/symbols-lsm-cross.png)
   * x      | ![lsm-x](https://developers.arcgis.com/javascript/latest/assets/references/core/symbols/symbols-lsm-x.png)
   *
   * @default "arrow"
   */
  accessor style: LineMarkerStyle;
  /** The symbol type. */
  get type(): "line-marker";
}