import Button from '../button'
import { useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { usePaginationContext } from './context'
import { PaginationPrevNextProps } from './pagination.types'

/** Displays a page navigation button, which navigates forward or backward. */
export const PaginationPrevNext = vui<'button', PaginationPrevNextProps>((props, ref) => {
  const { className, direction, ...rest } = props
  const { onPageChange, page, pageCount } = usePaginationContext()
  const styles = useStyleConfig('Pagination', usePaginationContext())

  const isPrev = direction === 'previous'
  const pageChange = isPrev ? -1 : 1
  const directionProps = {
    disabled: isPrev ? page === 1 : page === pageCount,
    icon: `falAngle${isPrev ? 'Left' : 'Right'}`,
    onClick: () => onPageChange(page + pageChange),
  }

  return (
    <Button
      className={cs('vui-paginationPrevNext', className)}
      minW={0}
      ref={ref}
      size="sm"
      variant="text"
      {...styles.prevNext}
      {...directionProps}
      {...rest}
    />
  )
})

PaginationPrevNext.displayName = 'PaginationPrevNext'

export default PaginationPrevNext
