import type ColorSizeStop from "../../../renderers/visualVariables/support/ColorSizeStop.js";
import type SizeSliderViewModel from "../SizeSlider/SizeSliderViewModel.js";
import type { GradientStopInfo } from "../types.js";
import type { SizeSliderViewModelProperties } from "../SizeSlider/SizeSliderViewModel.js";

export interface ColorSizeSliderViewModelProperties extends SizeSliderViewModelProperties {
  /**
   * The colors and sizes corresponding with data values in the
   * [ColorVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html) and
   * [SizeVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html) of the renderer
   * associated with the slider.
   *
   * Use the [ColorSizeSlider#fromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSizeSlider.html#fromRendererResult)
   * method to conveniently construct these stops from a renderer generated from
   * the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer)
   * smart mapping module.
   *
   * Use [ColorSizeSlider#updateVisualVariables()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSizeSlider.html#updateVisualVariables) to update the renderer's
   * visual variables with the values matching the slider thumb positions.
   *
   * @example
   * slider.viewModel.stops = [
   *   { value: 25, color: "white", size: 1000 },
   *   { value: 75, color: "dodgerblue", size: 100000 }
   * ];
   * @example
   * sizeRendererCreator.createContinuousRenderer({
   *   layer: featureLayer,
   *   field: "fieldName",
   *   basemap: "gray-vector"
   * }).then(function(sizeResponse){
   *   const slider = new SizeSlider({
   *     viewModel: new SizeSliderVM({
   *       stops: sizeResponse.visualVariable.stops
   *     }),
   *     container: "sliderDiv"
   *   });
   * });
   */
  stops?: ColorSizeStop[];
}

/**
 * Provides the logic for the [ColorSizeSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSizeSlider.html) widget.
 *
 * @since 4.12
 * @see [ColorSizeSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSizeSlider.html)
 */
export default class ColorSizeSliderViewModel extends SizeSliderViewModel<ColorSizeStop> {
  constructor(properties?: ColorSizeSliderViewModelProperties);
  /**
   * The colors and sizes corresponding with data values in the
   * [ColorVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-ColorVariable.html) and
   * [SizeVariable](https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-visualVariables-SizeVariable.html) of the renderer
   * associated with the slider.
   *
   * Use the [ColorSizeSlider#fromRendererResult()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSizeSlider.html#fromRendererResult)
   * method to conveniently construct these stops from a renderer generated from
   * the [createContinuousRenderer()](https://developers.arcgis.com/javascript/latest/api-reference/esri-smartMapping-renderers-univariateColorSize.html#createContinuousRenderer)
   * smart mapping module.
   *
   * Use [ColorSizeSlider#updateVisualVariables()](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-smartMapping-ColorSizeSlider.html#updateVisualVariables) to update the renderer's
   * visual variables with the values matching the slider thumb positions.
   *
   * @example
   * slider.viewModel.stops = [
   *   { value: 25, color: "white", size: 1000 },
   *   { value: 75, color: "dodgerblue", size: 100000 }
   * ];
   * @example
   * sizeRendererCreator.createContinuousRenderer({
   *   layer: featureLayer,
   *   field: "fieldName",
   *   basemap: "gray-vector"
   * }).then(function(sizeResponse){
   *   const slider = new SizeSlider({
   *     viewModel: new SizeSliderVM({
   *       stops: sizeResponse.visualVariable.stops
   *     }),
   *     container: "sliderDiv"
   *   });
   * });
   */
  accessor stops: ColorSizeStop[];
  /** Generates the color ramp gradient rendered on the slider. */
  getStopInfo(): GradientStopInfo[];
}