import { Observable } from '@legendapp/state';
import { DeepMaybeObservable } from '@usels/core';
import { ConfigurableWindow } from '../../shared/configurable.mjs';
import { MaybeEventTarget } from '../../types.mjs';

interface Position {
    x: number;
    y: number;
}
interface UseDraggableOptions extends ConfigurableWindow {
    /** Only start drag if pointerdown target exactly matches the element. Default: false */
    exact?: boolean;
    /** Call preventDefault on pointer events. Default: false */
    preventDefault?: boolean;
    /** Call stopPropagation on pointer events. Default: false */
    stopPropagation?: boolean;
    /** Use capture phase for pointerdown. Default: false */
    capture?: boolean;
    /** Restrict drag to a specific handle element */
    handle?: MaybeEventTarget;
    /** Clamp drag position inside this container element */
    containerElement?: MaybeEventTarget;
    /** Initial position. Read once at mount time. Default: { x: 0, y: 0 } */
    initialValue?: Position;
    /** Called on drag start. Return false to cancel. */
    onStart?: (position: Position, event: PointerEvent) => void | false;
    /** Called on each drag move */
    onMove?: (position: Position, event: PointerEvent) => void;
    /** Called on drag end */
    onEnd?: (position: Position, event: PointerEvent) => void;
    /** Restrict movement axis. Default: 'both' */
    axis?: "x" | "y" | "both";
    /** Disable dragging */
    disabled?: boolean;
    /** Filter by pointer type. Default: all types allowed */
    pointerTypes?: Array<"mouse" | "pen" | "touch">;
    /** Clamp drag position inside the viewport. Default: false */
    restrictInView?: boolean;
}
interface UseDraggableReturn {
    /** Current X position */
    x$: Observable<number>;
    /** Current Y position */
    y$: Observable<number>;
    /** Current position as { x, y } */
    position$: Observable<Position>;
    /** Whether currently dragging */
    isDragging$: Observable<boolean>;
    /** CSS position string: "left: Xpx; top: Ypx;" */
    style$: Observable<string>;
}
/**
 * Framework-agnostic draggable Pointer-Events wrapper.
 *
 * Must be called inside a `useScope` factory — pointer listeners are
 * registered via `createEventListener` and cleaned up automatically when the
 * scope disposes. Public behavior matches the legacy `useDraggable` hook.
 *
 * @param target - Element to make draggable (`Ref$`, `Observable<Element|null>`, raw Element, etc.).
 * @param options - Configuration (supports `DeepMaybeObservable` — each field may be an Observable).
 */
declare function createDraggable(target: MaybeEventTarget, options?: DeepMaybeObservable<UseDraggableOptions>): UseDraggableReturn;

export { type Position, type UseDraggableOptions, type UseDraggableReturn, createDraggable };