import type MapView from "../views/MapView.js";
import type Widget from "./Widget.js";
import type { Icon } from "@esri/calcite-components/components/calcite-icon";
import type { WidgetProperties } from "./Widget.js";

export interface TimeZoneLabelProperties extends WidgetProperties, Partial<Pick<TimeZoneLabel, "disabled" | "expanded" | "view">> {
  /**
   * The direction the widget will expand.
   *
   * By default, the widget will expand inward if assigned to a View UI corner. If the widget is positioned manually,
   * the widget will expand towards the "end" which is equivalent to right in a LTR application.
   *
   * @example
   * // Create a TimeZoneLabel widget that expands to towards the right (on a LTR application).
   * const timeZoneLabel = new TimeZoneLabel({ expandDirection: "end", view: view });
   *
   * // Manually assign the widget to the View's UI.
   * view.ui.add(timeZoneLabel, "manual");
   */
  expandDirection?: TimeZoneLabelExpandDirection | null;
  /**
   * Icon which represents the widget. It is typically used when the widget is controlled by another
   * one (e.g. in the Expand widget).
   *
   * @default "time-zone"
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   * @since 4.27
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   */
  icon?: Icon["icon"] | null;
}

export type TimeZoneLabelExpandDirection = "start" | "end";

/**
 * TimeZoneLabel is widget for displaying the current [time zone](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#timeZone) of the
 * [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/). The widget has two states, collapsed as a small button and expanded displaying
 * the internationalized name of the MapView's time zone. The user can toggle between these states by clicking the
 * widget's expand/collapse button. By default the widget is collapsed.
 *
 * The widget will expand to the right when the document's direction is set to `ltr` (left-to-right) unless the widget
 * is added to the `top-right` to `bottom-right` View UI corners where it will expand towards the left. Similarly the
 * opposite occurs when the document's direction is set to `rtl`.
 *
 * To add the `TimeZoneLabel` to the upper right hand corner in the default collapsed state.
 * ```js
 * view.ui.add(new TimeZoneLabel({ view: view }), "top-right");
 * ```
 *
 * To add the `TimeZoneLabel` widget to the lower right hand corner of the View expanded.
 * ```js
 * view.ui.add(new TimeZoneLabel({ expanded: true, view: view }), "bottom-right");
 * ```
 *
 * @deprecated
 * since version 4.33. Use the [Time Zone Label component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-time-zone-label/) instead.
 * For information on widget deprecation, read about [Esri's move to web components](https://developers.arcgis.com/javascript/latest/components-transition-plan/).
 * @since 4.28
 */
export default class TimeZoneLabel extends Widget<TimeZoneLabelProperties> {
  constructor(properties?: TimeZoneLabelProperties);
  /**
   * When `true`, sets the widget to a disabled state so the user cannot interact with it.
   *
   * @default false
   * @example
   * // Create the TimeZoneLabel widget.
   * const timeZoneLabel = new TimeZoneLabel({ view: view });
   *
   * // Add the widget to the upper right hand corner of the view.
   * view.ui.add(timeZoneLabel, "top-right");
   *
   * // Disable the widget when a user clicks a button.
   * document.getElementById("myButton").addEventListener("click", () => {
   *   timeZoneLabel.disable = true;
   * });
   */
  accessor disabled: boolean;
  /**
   * The direction the widget will expand.
   *
   * By default, the widget will expand inward if assigned to a View UI corner. If the widget is positioned manually,
   * the widget will expand towards the "end" which is equivalent to right in a LTR application.
   *
   * @example
   * // Create a TimeZoneLabel widget that expands to towards the right (on a LTR application).
   * const timeZoneLabel = new TimeZoneLabel({ expandDirection: "end", view: view });
   *
   * // Manually assign the widget to the View's UI.
   * view.ui.add(timeZoneLabel, "manual");
   */
  get expandDirection(): TimeZoneLabelExpandDirection;
  set expandDirection(value: TimeZoneLabelExpandDirection | null | undefined);
  /**
   * The expanded state of the widget.
   *
   * @default false
   * @example
   * // Create an expanded TimeZoneLabel widget.
   * const timeZoneLabel = new TimeZoneLabel({ expanded: true, view: view });
   *
   * // Add the widget to the upper right hand corner of the view.
   * view.ui.add(timeZoneLabel, "top-right");
   */
  accessor expanded: boolean;
  /**
   * Icon which represents the widget. It is typically used when the widget is controlled by another
   * one (e.g. in the Expand widget).
   *
   * @default "time-zone"
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   * @since 4.27
   * @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
   */
  get icon(): Icon["icon"];
  set icon(value: Icon["icon"] | null | undefined);
  /**
   * A reference to a [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/).
   *
   * While this widget can be created without a reference to a [MapView](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/) it is not very
   * practical without one. A reference to a MapView is need for the widget to obtain the current time zone.
   *
   * @example
   * // Create an expanded TimeZoneLabel widget.
   * const timeZoneLabel = new TimeZoneLabel({ expanded: true, view: view });
   *
   * // Add the widget to the upper right hand corner of the view.
   * view.ui.add(timeZoneLabel, "top-right");
   */
  accessor view: MapView | null | undefined;
}