import { ConfigurableWindow, MaybeElementRef, Pausable } from '@vueuse/core'
import { MaybeRef, MaybeRefOrGetter, Ref, ShallowReactive, WatchOptions } from 'vue'

/**
 * 在 el 元素上响应式绑定 class
 * - vue-composable
 *
 * @param element - dom 元素
 * @param className - 类名
 * @param has - 是否有此类名
 * @returns 是否绑定 class 的响应对象，如果 has 是 ref，即返回 has
 */
export declare function useClass(element: MaybeElementRef, className: string, has?: MaybeRef<boolean>): Ref<boolean>

/** Options for {@link useIdleFn} */
interface UseIdleFnOptions extends ConfigurableWindow {
    /** 回调最大等待时间 */
    timeout?: MaybeRefOrGetter<number>
    /** 立即执行一次 */
    immediate?: boolean
}

/**
 * 使用空闲回调函数
 * - vue-composable
 *
 * @param fn - 回调函数
 * @param options - 配置
 * @returns 暂停/恢复执行
 */
export declare function useIdleFn(fn: () => unknown, options?: UseIdleFnOptions): Pausable

/** Options for {@link useElementIntersectionRect} */
interface UseElementIntersectionRectOptions {
    /** 相对的 dom 元素，默认视口 */
    relativeElement?: MaybeElementRef
    /** 最坏情况下，采取定时检测方式，配置间隔时间 */
    interval?: MaybeRef<number>
}

/**
 * 使用 el 元素与给定元素/视口的相交包围盒
 * - vue-composable
 *
 * @param element - dom 元素
 * @param callback - 回调方法
 * @param options - 配置
 * @returns 包围盒
 */
export declare function useElementIntersectionRect(
    element: MaybeElementRef,
    callback: (rect: { top: number, left: number, width: number, height: number }) => void,
    options?: UseElementIntersectionRectOptions,
): {
    /** 停止监测 */
    stop: () => void
    /** 立即检测并更新 */
    update: () => Promise<void>
}

/**
 * onMounted 转 promise
 * - vue-composable
 *
 * @param delay - 在 onMounted 回调后等待时长
 */
export declare function promiseMounted(delay?: number): Promise<void>

/**
 * onMounted 转 ref
 * - vue-composable
 *
 * @param delay - 在 onMounted 回调后等待时长
 * @returns 标志是否 mounted
 */
export declare function useMounted(delay?: number): Ref<boolean>

/** Options for {@link useHistoryStack} */
interface UseHistoryStackOptions {
    /** 键盘快捷操作 */
    keyboard?: boolean
    /** 键盘事件过滤 */
    keyboardFilter?: (event: KeyboardEvent) => boolean
}

/**
 * 使用历史操作栈
 * - vue-composable
 *
 * @param options - 配置
 * @returns 历史记录和操作方法
 */
export declare function useHistoryStack(options?: UseHistoryStackOptions): {
    /** 历史堆栈 */
    history: ShallowReactive<
        {
            /** 标题 */
            title: string
            /** 时间 */
            date: number
            /** 撤销 */
            undo: () => unknown
            /** 重做 */
            redo: () => unknown
        }[]
    >

    /** 当前记录 */
    current: Ref<number>
    /** 可撤销 */
    revocable: Ref<boolean>
    /** 可重做 */
    redoable: Ref<boolean>
    /** 清理 */
    clear: () => void
    /** 添加记录 */
    record: (name: string, undo: () => unknown, redo: () => unknown) => Promise<void>
    /** 撤销 */
    undo: (pointer?: number) => Promise<void>
    /** 重做 */
    redo: (pointer?: number) => Promise<void>
    /** 忙碌 */
    busy: Ref<boolean>
}

/**
 * 使用数据过滤
 * - vue-composable
 *
 * @param originData - 原始数据
 * @param pattern - 模式
 * @param fields - 字段
 * @param options - 配置
 * @returns 过滤后的数据
 */
export function useDataFilter<T extends object>(
    originData: MaybeRefOrGetter<T[] | undefined>,
    pattern: Ref<string>,
    fields: Array<keyof T>,
    options?: {
        /**
         * 节流时间，ms
         * @defaultValue 300
         */
        debounce?: number | undefined
        /**
         * 是否忽略大小写
         * @defaultValue true
         */
        ignoreCase?: boolean | undefined
        /**
         * 是否修剪空格
         * @defaultValue true
         */
        trimSpace?: boolean | undefined
        /**
         * 是否是树形数据
         * @defaultValue false
         */
        isTree?: boolean | undefined
        /**
         * 子项字段
         * @defaultValue 'children'
         */
        childrenField?: keyof T | undefined
        /**
         * 过滤后回调
         */
        afterFilter?: ((data: T[]) => void) | undefined
        /**
         * 监听 originData 变化时的刷新策略
         */
        watchFlush?: WatchOptions['flush']
        /**
         * 监听 pattern 变化时的刷新策略
         */
        watchPatternFlush?: WatchOptions['flush']
        /**
         * 是否拼音匹配
         * @defaultValue false
         */
        pinyinMatch?: boolean | undefined
    },
): Ref<T[]>