import { Ref } from 'vue';
import { default as Sortable } from 'sortablejs';

/**
 * 拖拽配置选项
 */
export interface SortableDragOptions {
    /** 是否启用拖拽 */
    enabled?: boolean;
    /** 拖拽动画时长（毫秒） */
    animation?: number;
    /** 拖拽手柄选择器（如果指定，只有点击手柄才能拖拽） */
    handle?: string;
    /** 分组名称（相同分组的元素可以互相拖拽） */
    group?: string | {
        name: string;
        pull?: boolean;
        put?: boolean;
    };
    /** 是否允许拖拽到其他位置 */
    sort?: boolean;
    /** 幽灵元素的 CSS 类名 */
    ghostClass?: string;
    /** 选中元素的 CSS 类名 */
    chosenClass?: string;
    /** 拖拽中元素的 CSS 类名 */
    dragClass?: string;
    /** 判断元素是否可拖拽的函数 */
    filter?: string | ((evt: Event, target: HTMLElement) => boolean);
    /** 阻止拖拽的选择器 */
    preventOnFilter?: boolean;
}
/**
 * 拖拽事件回调
 */
export interface SortableDragEvents {
    /** 拖拽开始事件 */
    onStart?: (evt: Sortable.SortableEvent) => void;
    /** 拖拽结束事件 */
    onEnd?: (evt: Sortable.SortableEvent) => void;
    /** 元素移动事件 */
    onMove?: (evt: Sortable.MoveEvent, originalEvent: Event) => boolean | -1 | 1;
    /** 拖拽更新事件（在同一列表中排序） */
    onUpdate?: (evt: Sortable.SortableEvent) => void;
    /** 元素添加事件（从其他列表添加） */
    onAdd?: (evt: Sortable.SortableEvent) => void;
    /** 元素移除事件（移动到其他列表） */
    onRemove?: (evt: Sortable.SortableEvent) => void;
    /** 拖拽选择事件 */
    onChoose?: (evt: Sortable.SortableEvent) => void;
    /** 取消选择事件 */
    onUnchoose?: (evt: Sortable.SortableEvent) => void;
}
/**
 * useSortableDrag 参数接口
 */
export interface UseSortableDragParams {
    /** 树容器的 DOM 引用 */
    containerRef: Ref<HTMLElement | undefined>;
    /** 拖拽配置选项 */
    options: SortableDragOptions;
    /** 拖拽事件回调 */
    events: SortableDragEvents;
    /** 搜索关键词（用于判断是否禁用拖拽） */
    filterText?: Ref<string>;
    /** 树节点容器选择器 */
    treeNodeSelector?: string;
}
/**
 * useSortableDrag 返回值接口
 */
export interface UseSortableDragReturn {
    /** 是否启用拖拽（搜索时自动禁用） */
    isDraggableEnabled: Ref<boolean>;
    /** SortableJS 实例 */
    sortableInstance: Ref<Sortable | null>;
    /** 销毁拖拽实例 */
    destroy: () => void;
    /** 启用拖拽 */
    enable: () => void;
    /** 禁用拖拽 */
    disable: () => void;
}
/**
 * 使用 SortableJS 实现树形组件拖拽
 *
 * @param params - 拖拽参数配置
 * @returns 拖拽控制方法和状态
 *
 * @example
 * ```ts
 * const { isDraggableEnabled, destroy } = useSortableDrag({
 *   containerRef: treeRef,
 *   options: {
 *     enabled: true,
 *     animation: 150,
 *     handle: '.drag-handle'
 *   },
 *   events: {
 *     onEnd: (evt) => {
 *       console.log('拖拽完成', evt);
 *     }
 *   }
 * });
 * ```
 */
export declare function useSortableDrag(params: UseSortableDragParams): UseSortableDragReturn;