import { Fragment } from 'react'

import Box, { BoxProps } from '../box'
import { useStyleConfig, vui } from '../core'
import { cs, isNumber, isString } from '../utils'
import { usePaginationContext } from './context'
import PaginationButton from './paginationButton'
import PaginationEllipsis from './paginationEllipsis'
import PaginationPrevNext from './paginationPrevNext'

/** Displays a set of page navigation buttons. */
export const PaginationNavigation = vui<'div', BoxProps>((props, ref) => {
  const { children, className, ...rest } = props
  const { items } = usePaginationContext()
  const styles = useStyleConfig('Pagination', usePaginationContext())

  return (
    <Box className={cs('vui-paginationNavigation', className)} gap={1} ref={ref} wrap {...styles.navigation} {...rest}>
      {children ??
        items.map(item => (
          <Fragment key={item}>
            {item === 'previous' && <PaginationPrevNext aria-label="previous" direction="previous" />}

            {isNumber(item) && <PaginationButton page={item} />}

            {isString(item) && item.includes('ellipsis') && <PaginationEllipsis />}

            {item === 'next' && <PaginationPrevNext aria-label="next" direction="next" />}
          </Fragment>
        ))}
    </Box>
  )
})

PaginationNavigation.displayName = 'PaginationNavigation'

export default PaginationNavigation
