import type Widget from "../../widgets/Widget.js";

/** @since 5.0 */
export type ComponentName = "attribution" | "compass" | "navigation-toggle" | "zoom";

/** @since 5.0 */
export interface Options {
  /**
   * The placement index of the component(s). This index shows where to place
   *                                  the component relative to other components. For example a value of `0` would
   *                                  place it topmost when position is top-*, leftmost for bottom-left and
   *                                  right most for bottom-right.
   *
   * @since 5.0
   */
  index?: number;
  /**
   * The destination position. The component will be placed
   *                            in the UI [UI#container](https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#container) when not provided.
   *                            If not specified, `manual` is used by default. Using `manual` allows you to place the component in a
   *                                     container where you can position it anywhere using css. For the other possible values, "top", "bottom", "left",
   *                                     and "right" are consistent placements. The "leading" and "trailing" values depend on whether the browser is using
   *                                     right-to-left (RTL) or left-to-right (LTR). For LTR, "leading" is left and "trailing" is right.
   *                                     For RTL, "leading" is right and "trailing" is left.
   *
   * @since 5.0
   */
  position?: UIPosition;
}

/** @since 5.0 */
export interface ComponentOptions extends Options {
  /**
   * The component
   * to move/add to the UI. This can be a widget instance, HTML element, a string value representing
   * a DOM node ID.
   *
   * @since 5.0
   */
  component: ComponentCompatible;
}

/** @since 5.0 */
export interface MoveOptions extends Exclude<Options, "key"> {}

/** @since 5.0 */
export interface MoveComponentOptions extends MoveOptions {
  /**
   * The component
   * to move/add to the UI. This can be a widget instance, HTML element, a string value representing
   * a DOM node ID.
   *
   * @since 5.0
   */
  component: ComponentCompatible;
}

/** @since 5.0 */
export type ComponentCompatible = Widget | HTMLElement | string;

/**
 * The UI position of an element in the view.
 *
 * @since 5.0
 */
export type UIPosition = UICornerPosition | "manual";

/** @since 5.0 */
export type UICornerPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing";

/** @since 5.0 */
export interface ViewPadding {
  /**
   * The bottom padding (in pixels).
   *
   * @since 5.0
   */
  bottom: number;
  /**
   * The left padding (in pixels).
   *
   * @since 5.0
   */
  left: number;
  /**
   * The right padding (in pixels).
   *
   * @since 5.0
   */
  right: number;
  /**
   * The top padding (in pixels).
   *
   * @since 5.0
   */
  top: number;
}