import { Metric } from "../../Metrics/Metric.cjs";
import { Plugin } from "../../Plugin/Plugin.cjs";
import { Layout, LayoutShift } from "./types.cjs";

//#region src/Plugins/CLS/CLSPlugin.d.ts
/**
 * CLS Plugin
 *
 * A plugin for tracking layout shifts associated with a given metric.
 * By providing this plugin with a DOM selector, it'll track and record
 * the position of the element between `start()` and `stop()` calls. If
 * layout shifts are detected, they'll be available on the plugin instance
 *
 * ```typescript
 * const metric = new Metric("My Metric", {
 *   CLS: new CLSPlugin(".my-ui-element")
 * });
 *
 * metric.start() // records the initial layout position of ".my-ui-element"
 * metric.plugins.CLS.inspect() // records additional layout positions of ".my-ui-element"
 * metric.stop() // Records all layout shifts that occurred between the start and stop time
 * ```
 */
declare class CLSPlugin<T extends Metric<any, any> = Metric<any, any>> extends Plugin<T> {
  private name;
  selector: string;
  layoutShifts: LayoutShift[];
  private static readonly DOMRect;
  private static readonly measures;
  initialLayout: Layout;
  constructor(selector: string);
  register(metric: T): void;
  /**
   * Start
   *
   * Records the target elements's height, width and absolute
   * coordinates
   */
  protected start(): void;
  /**
   * Stop
   *
   * Records the target elements's height, width and absolute
   * coordinates then compares them to the target's initial
   * layout position
   */
  protected stop(metric: T): void;
  /**
   * Reset
   *
   * Resets all recorded layout positions and shifts
   */
  protected reset(): void;
  /**
   * Inspect
   *
   * Records the target elements's height, width and absolute
   * coordinates then compares them to the target's initial
   * layout position
   */
  inspect(time?: number): void;
  /**
   * Query Selector
   *
   * Queries the DOM for the provided selector and returns the result
   */
  private querySelector;
  /**
   * Detect Layout Shift
   *
   * Compares the current positions of the target element to its
   * initial layout position. When shifts are detected, entries
   * are added to the `layoutShifts` array containing shifted
   * layout properties and the number of pixels
   */
  private detectLayoutShift;
  /**
   * From Body
   *
   * Returns the coordinates of the target element relative
   * to the body
   */
  private fromBody;
  /**
   * To JSON
   *
   * Modifies the return value of the `CLSPlugin` interface when passed
   * to `JSON.stringify`
   */
  toJSON(): {
    selector: string;
    layoutShifts: LayoutShift[];
  };
}
//#endregion
export { CLSPlugin };