import React from 'react'
import cns from 'classnames'

import IcePagination from '../Pagination'
import { concat } from '../utils'
import { useTable } from './providers/TableProvider'
import { TablePaginationOptions } from './types'

export type Props = TablePaginationOptions

export default function Pagination(props: Props) {
  const { currentPage, total, pageSize = 10, onChange } = props
  const { prefix } = useTable()

  function handleChange(nextPage: number, nextPageSize: number) {
    if (nextPageSize === pageSize) {
      onChange?.(nextPage, nextPageSize)
    } else {
      // 如果有切换 pageSize 的行为，则重置页码
      onChange?.(0, nextPageSize)
    }
  }

  const className = cns(
    concat(prefix, 'pagination'),
    concat(prefix, 'pagination', 'align', props.align ?? 'right')
  )

  return (
    <div className={className}>
      <IcePagination
        current={currentPage}
        total={total}
        pageSize={pageSize}
        showSizeChanger
        onChange={handleChange}
      />
    </div>
  )
}