import { Pagination } from 'antd';

interface PaginationValues {
  offset: number;
  limit: number;
  total_count: number;
}

export interface PaginationProps {
  pagination: PaginationValues;
  changePagination: (pagination: PaginationValues) => void;
  onChange: (pagination: PaginationValues) => void;
}

const PaginationWrap = (props: PaginationProps) => {
  const { pagination, changePagination, onChange, ...rest } = props;

  const { offset, limit = 10, total_count } = pagination;

  // 分页改变
  const onPaginationChange = (page: number, limit: number) => {
    const newPagination = {
      ...pagination,
      offset: (page - 1) * (limit || 10),
      limit: limit,
    };

    changePagination(newPagination);
    onChange(newPagination);
  };

  return (
    <Pagination
      style={{ textAlign: 'right', marginTop: '16px' }}
      current={(offset && Math.floor(offset / limit) + 1) || 1}
      pageSize={limit ? limit : 10}
      total={total_count}
      showTotal={(total) => `共 ${total} 条`}
      showSizeChanger={false}
      onChange={(page: number, pageSize: number) => {
        onPaginationChange(page, pageSize);
      }}
      {...rest}
    />
  );
};

export default PaginationWrap;