import type {
  ButtonHTMLAttributes,
  ForwardRefExoticComponent,
  ReactNode,
  RefAttributes,
  RefObject,
} from "react";

import type {
  CreateLoaderButtonOptions,
  DesignInput,
  LoaderButtonTokens,
  LoaderDesign,
  LoaderInstance,
  MountLoaderOptions,
} from "./index.js";

export type {
  DesignInput,
  LoaderDesign,
  LoaderInstance,
  LoaderButtonSize,
  LoaderButtonVariant,
  LoaderButtonTheme,
  LoaderButtonShape,
  LoaderIconPosition,
  LoaderButtonTokens,
} from "./index.js";

export declare function useLoader(
  elementRef: RefObject<Element | null>,
  options: MountLoaderOptions,
): LoaderInstance | null;

type OmittedButtonProps = "onClick" | "type" | "disabled" | "className" | "style" | "children";

export interface LoaderButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, OmittedButtonProps>,
    LoaderButtonTokens,
    Pick<
      CreateLoaderButtonOptions,
      | "label"
      | "idleLabel"
      | "loading"
      | "size"
      | "variant"
      | "theme"
      | "shape"
      | "iconPosition"
      | "type"
      | "tilt"
      | "sheen"
      | "rim"
      | "press"
      | "responsive"
      | "fullWidth"
      | "disabled"
      | "resetOnClick"
      | "resetOnLoading"
      | "replayDuration"
      | "ariaLabel"
      | "clock"
      | "fps"
      | "speed"
      | "phaseOffset"
      | "maxDpr"
      | "paused"
      | "pauseOffscreen"
      | "respectReducedMotion"
      | "releaseWebGLOffscreen"
      | "releaseDelay"
      | "rootMargin"
      | "threshold"
      | "onError"
      | "onFrame"
    > {
  design: DesignInput;
  /** Overrides `label` when provided. */
  children?: ReactNode;
  className?: string;
  style?: Record<string, string | number>;
  onClick?: ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
}

export interface LoaderButtonHandle {
  readonly element: HTMLDivElement | null;
  readonly button: HTMLButtonElement | null;
  readonly slot: HTMLSpanElement | null;
  readonly loader: LoaderInstance | null;
  readonly design: LoaderDesign;
  reset(): void;
  play(): void;
  pause(): void;
  focus(options?: FocusOptions): void;
  blur(): void;
}

export declare const LoaderButton: ForwardRefExoticComponent<
  LoaderButtonProps & RefAttributes<LoaderButtonHandle>
>;

export default LoaderButton;

export {
  mountLoader,
  createLoaderButton,
  designs,
  designsById,
  designIds,
  designsByKind,
  getDesign,
  resolveDesign,
  createClock,
  getSharedClock,
} from "./index.js";