import type Collection from "../../core/Collection.js";
import type ValuePickerBaseComponent from "./ValuePickerBaseComponent.js";
import type { ReadonlyArrayOrCollection } from "../../core/Collection.js";
import type { ValuePickerBaseComponentProperties } from "./ValuePickerBaseComponent.js";

export interface ValuePickerCollectionProperties<T = any> extends ValuePickerBaseComponentProperties {
  /**
   * A collection of values that can be navigated or animated with the play, next, and previous buttons on the [ValuePicker](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/) widget..
   *
   * @example
   * const valuePicker = new ValuePicker({
   *   values: ["hybrid"]
   *   component: new ValuePickerCollection({
   *     collection: ["hybrid", "oceans", "osm"] // autocast to Collection
   *   })
   * });
   */
  collection?: ReadonlyArrayOrCollection<T> | null;
}

/**
 * This class represents an ordered [Collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/) of values that can be assigned to the
 * [ValuePicker.component](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/#component) property of a [ValuePicker](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/) widget and can be interacted with at runtime.
 * See [Using an arbitrary collection component to present predefined list](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/#from-collection) section
 * for more information how to set this up.
 *
 * @since 4.27
 * @example
 * // Assign a collection of objects to the ValuePicker.
 * const collection = new Collection([
 *   { name: "Isaac Newton", dob: new Date(1643, 0, 4)},
 *   { name: "Albert Einstein", dob: new Date(1879, 2, 14)},
 *   { name: "Ernest Rutherford", dob: new Date(1871, 7, 20)}
 * ]);
 *
 * const valuePicker = new ValuePicker({
 *   component: new ValuePickerCollection({ collection }),
 *   values: [collection.at(0)]
 * });
 *
 * reactiveUtils.watch(
 *   () => valuePicker.values,
 *   (values) => {
 *     const scientist = values[0];
 *     console.log(`${scientist.name} was born on ${scientist.age.toDateString()}`);
 *   }
 * );
 */
export default class ValuePickerCollection<T = any> extends ValuePickerBaseComponent {
  constructor(properties?: ValuePickerCollectionProperties);
  /**
   * A collection of values that can be navigated or animated with the play, next, and previous buttons on the [ValuePicker](https://developers.arcgis.com/javascript/latest/references/core/widgets/ValuePicker/) widget..
   *
   * @example
   * const valuePicker = new ValuePicker({
   *   values: ["hybrid"]
   *   component: new ValuePickerCollection({
   *     collection: ["hybrid", "oceans", "osm"] // autocast to Collection
   *   })
   * });
   */
  get collection(): Collection<T> | null | undefined;
  set collection(value: ReadonlyArrayOrCollection<T> | null | undefined);
  get type(): "collection";
}