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

export type ComponentName = "attribution" | "compass" | "navigation-toggle" | "zoom";

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.
   */
  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.
   */
  position?: UIPosition;
}

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.
   */
  component: ComponentCompatible;
}

export interface MoveOptions extends Exclude<Options, "key"> {}

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.
   */
  component: ComponentCompatible;
}

export type ComponentCompatible = Widget | HTMLElement | string;

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

export type UICornerPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-leading" | "top-trailing" | "bottom-leading" | "bottom-trailing";

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