import React, { useCallback } from "react";
import { Pagination } from "@ttk/component";
import { useData, useActions, useCommit } from "@ttk/app-loader";

export default function (props) {
  const actions = useActions(props);
  const commit = useCommit();
  const { pageIndex, pageSize, recordCount } = useData([
    props,
    "roleSearchParam",
    "pager",
  ]).toJS();
  async function onShowSizeChange(current, pageSize) {
    commit([props, "roleSearchParam"], {
      type: "update_search_page",
      data: { pageSize },
    });
    await actions.roleData();
  }
  async function onChange(page, pageSize) {
    commit([props, "roleSearchParam"], {
      type: "update_search_page",
      data: { pageIndex: page },
    });
    actions.roleData();
  }
  return (
    <div>
      <Pagination
        pageSize={pageSize}
        total={recordCount}
        current={pageIndex}
        pageSizeOptions={["20", "50", "100", "200", "300", "400"]}
        onChange={onChange}
        showSizeChanger
        onShowSizeChange={onShowSizeChange}
      />
    </div>
  );
}
