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

export interface ValuePickerLabelProperties extends ValuePickerBaseComponentProperties, Partial<Pick<ValuePickerLabel, "items">> {}

/** Object used to define the label items. */
export interface LabelItem {
  /** The value of the item. */
  value: string;
  /** The label users will see for this item. */
  label: string;
}

/**
 * This class represents a fixed list of predefined label values that can be assigned to a [ValuePicker.component](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ValuePicker.html#component)
 * property of the [ValuePicker](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ValuePicker.html) widget.
 * See [Using the label component to present items](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-ValuePicker.html#from-labels) section
 * for more information how to set this up.
 *
 * @since 4.27
 * @example
 * // Create a ValuePicker widget with a label component.
 * const valuePicker = new ValuePicker({
 *   component: new ValuePickerLabel({
 *     items: [
 *       { value: "ind", label: "Industrial" },
 *       { value: "res", label: "Residential" },
 *       { value: "com", label: "Commercial" }
 *     ]
 *   }),
 *   values: ["res"]
 * });
 */
export default class ValuePickerLabel extends ValuePickerBaseComponent {
  constructor(properties?: ValuePickerLabelProperties);
  /**
   * An array of label items.
   *
   * @example
   * // Create a ValuePicker with a zip code label component.
   * const valuePicker = new ValuePicker({
   *   component: new ValuePickerLabel({
   *     items: [
   *       { value: "90606", label: "Whittier, CA (90606)" },
   *       { value: "76001", label: "Arlington, TX (76001)" },
   *       { value: "92335", label: "Fontana, CA (92335)" }
   *     ]
   *   }),
   *   values: ["90606"]
   * });
   */
  accessor items: LabelItem[] | null | undefined;
  get type(): "label";
}