import type TimeExtent from "../../time/TimeExtent.js";
import type TimeInterval from "../../time/TimeInterval.js";
import type { Icon } from "@esri/calcite-components/components/calcite-icon";

export type TimeSliderState = "disabled" | "ready" | "playing";

export type TimeSliderMode = "instant" | "time-window" | "cumulative-from-start" | "cumulative-from-end";

/**
 * Specifies an array of dates for the time slider widget. Can be used to create irregularly spaced stops.
 *
 * @example
 * // Explicitly define 5 stops.
 * const timeSlider = new TimeSlider({
 *   container: "timeSliderDiv",
 *   fullTimeExtent: {
 *     start: new Date(2000, 0, 1),
 *     end: new Date(2004, 2, 19)
 *   },
 *   timeExtent: {
 *     start: new Date(2000, 0, 1),
 *     end: new Date(2001, 3, 8)
 *   },
 *   stops: {
 *     dates: [
 *       new Date(2000, 0, 1),
 *       new Date(2001, 3, 8),
 *       new Date(2002, 0, 10),
 *       new Date(2003, 12, 8),
 *       new Date(2004, 2, 19)
 *     ]
 *   }
 * });
 */
export interface StopsByDates {
  /** Array of dates. */
  dates: Date[];
}

/**
 * Defines regularly spaced stops on the time slider from a [TimeInterval](https://developers.arcgis.com/javascript/latest/api-reference/esri-time-TimeInterval.html). The optional
 * [TimeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-time-TimeExtent.html) can confine the subdivision to a specific time frame. StopByInterval is useful
 * when the spacing is in terms of months and years, which cannot be reliably expressed in milliseconds.
 *
 * @example
 * // Add yearly intervals starting from the beginning of the TimeSlider.
 * const timeSlider = new TimeSlider({
 *   container: "timeSliderDiv",
 *   fullTimeExtent: {
 *     start: new Date(2000, 0, 1),
 *     end: new Date(2015, 2, 19)
 *   },
 *   timeExtent: {
 *     start: new Date(2000, 0, 1),
 *     end: new Date(2001, 0, 1)
 *   },
 *   stops: {
 *     interval: {
 *       value: 1,
 *       unit: "years"
 *     }
 *   }
 * });
 */
export interface StopsByInterval {
  /** Specifies a granularity of temporal data and allows you to visualize the data at specified intervals. It can be set at regular interval such as every hour or every day. */
  interval: TimeInterval;
  /** A period of time with definitive start and end dates. The time slider widget's [TimeSlider#fullTimeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#fullTimeExtent) will be used if this property is not specified. */
  timeExtent?: TimeExtent;
}

/**
 * Divides the time slider's [TimeSlider#fullTimeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#fullTimeExtent) into equal parts.
 * A stop will be placed at the start and end of each division resulting in _count + 1_ [TimeSlider#effectiveStops](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#effectiveStops).
 *
 * @example
 * // Add ten evenly spaced stops.
 * const timeSlider = new TimeSlider({
 *   container: "timeSliderDiv",
 *   fullTimeExtent: {
 *     start: new Date(2000, 0, 1),
 *     end: new Date(2004, 2, 19)
 *   },
 *   timeExtent: {
 *     start: new Date(2000, 0, 1),
 *     end: new Date(2000, 3, 8)
 *   },
 *   stops: {
 *     count: 10
 *   }
 * });
 */
export interface StopsByCount {
  /** Number of evenly spaced divisions. */
  count: number;
  /** The time period to divide. If unspecified, the time slider's [TimeSlider#fullTimeExtent](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#fullTimeExtent) will be used. */
  timeExtent?: TimeExtent;
}

export type Stops = StopsByDates | StopsByInterval | StopsByCount;

/**
 * Definition of an action that can be assigned to the [TimeSliderViewModel#actions](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#actions) property on the
 * [TimeSlider#actions](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html#actions) or the [TimeSliderViewModel#actions](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider-TimeSliderViewModel.html#actions). It is displayed in a menu when
 * the user clicks the ellipsis button ![timeSlider-actions-menu](https://developers.arcgis.com/javascript/latest/assets/img/apiref/widgets/timeslider/ellipsis.png) on the [TimeSlider](https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-TimeSlider.html) widget.
 */
export interface Action {
  /**
   * The name of the icon to display. The value of this property must match the icon name
   *                            from [Calcite UI Icons](https://developers.arcgis.com/calcite-design-system/icons/).
   */
  icon: Icon["icon"];
  /** Unique identifier of the action. */
  id: string;
  /** The title of the action that will be displayed in the menu. */
  title: string;
}