import { SetupContext, RenderFunction, Ref, ComponentPublicInstance } from 'vue'
import { XComponent, XComponentBase, SizeType } from './component'
/**
 * 组件 - 分页
 * @example import { XPager } from 'x-pager'
 */
export const XPager: XComponent<XPagerProps, XPagerEventProps, XPagerSlots>

export type XPagerEmits = [
    'update:pageSize',
    'update:currentPage',
    'page-change'
]

export interface PagerPrivateRef {
    refElem: Ref<HTMLDivElement>
}

export interface XPagerConstructor extends XComponentBase, XPagerMethods {
    props: XPagerProps
    context: SetupContext<XPagerEmits>
    getRefMaps(): PagerPrivateRef
    renderVN: RenderFunction
}

export interface PagerMethods {
    dispatchEvent(type: ValueOf<XPagerEmits>, params: any, evnt?: Event): void
    // /**
    //  * 上一页
    //  */
    // prevPage(): Promise<any>
    // /**
    //  * 下一页
    //  */
    // nextPage(): Promise<any>
    // /**
    //  * 向上翻页
    //  */
    // prevJump(): Promise<any>
    // /**
    //  * 向下翻页
    //  */
    // nextJump(): Promise<any>
}

export interface XPagerMethods extends PagerMethods { }

export type XPagerProps = {
    size?: XPagerPropTypes.Size
    /**
     * 当前页
     */
    currentPage?: XPagerPropTypes.CurrentPage
    /**
     * 每页大小
     */
    pageSize?: XPagerPropTypes.PageSize
    /**
     * 总条数
     */
    total?: XPagerPropTypes.Total
    /**
     * 显示页码按钮的数量
     */
    pagerCount?: XPagerPropTypes.PagerCount
    /**
    * 每页大小选项列表
    */
    pageSizes?: XPagerPropTypes.PageSizes
}

export namespace XPagerPropTypes {
    export type Size = SizeType
    export type CurrentPage = number
    export type PageSize = number
    export type Total = number
    export type PagerCount = number
    export type PageSizes = PageSizeItemType[]
}

export type PageSizeItemType = number | {
    label?: number | string
    value?: number | string
}

export type XPagerEventProps = {
    onPageChange?: XPagerEvents.PageChange
}

export namespace XPagerEvents {
    export type PageChange = (params: any) => void
}

export interface XPagerSlots {
    /**
     * 自定义左侧模板
     */
    left: (params: {
        [key: string]: any
    }) => any
    /**
     * 自定义右侧模板
     */
    right: (params: {
        [key: string]: any
    }) => any
}