import { BoxProps } from '../box'
import { ButtonProps } from '../button'
import { ThemingProps } from '../theme'
import { RenderProps } from '../utils'
import { UsePaginationReturnType } from './usePagination'
import { UsePaginationProps } from './usePagination.types'

export type PaginationButtonProps = ButtonProps & {
  /** Applies different styling to a button of the current page. */
  isActive?: boolean
  /** Number of the page, which this button represents. */
  page: number
}

export type PaginationContext = UsePaginationReturnType & ThemingProps<'Pagination'>

export type PaginationItem = 'ellipsisEnd' | 'ellipsisStart' | 'next' | 'previous' | number

export type PaginationPrevNextProps = ButtonProps & {
  /** Defines the logic of previous and next buttons. */
  direction: 'previous' | 'next'
}

export type PaginationProps = Omit<BoxProps, 'size' | 'variant'> &
  ThemingProps<'Pagination'> &
  UsePaginationProps & {
    /** Children provide render props using PaginationContext data. */
    children?: RenderProps<PaginationContext>
    /** Socket for page input on the right side. */
    goToPage?: JSX.Element
    /** Array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
    items?: PaginationItem[]
    /** Socket for the main navigation elements in the middle. */
    navigation?: JSX.Element
    /** Socket for numbers data on the left side. */
    results?: JSX.Element
  }
