import React, { } from 'react';

import { Pagination } from 'carbon-components-react';
import { GlobitsTable } from '../components/data-table/GlobitsTable';

interface PatientListProps {
  totalPatientCount: number;
  page: number;
  pageSize: number;
  patients: any[];
  loadPatients: (offSet: number, pageSize: number) => void;
  setNextOffSet: (next: number) => void;
  setPage: (page: number) => void;
  setPageSize: (size: number) => void;
  // setIsLoading: (loading: boolean) => void;
}

const PatientList: React.FC<PatientListProps> = ({
  totalPatientCount,
  patients,
  page,
  pageSize,
  setNextOffSet,
  setPage,
  setPageSize,
}) => {
  const tableHeaders = [
    { key: 'name', header: 'Name', isSortable: true },
    { key: 'gender', header: 'Gender' },
    { key: 'age', header: 'Age' },
    // { key: 'last_visit', header: 'Last Visit' },
    { key: 'actions', header: '' },
  ];

  // const handleChangePagination = (page: number, pageSize: number) => {
  //   setIsLoading()
  //   setNextOffSet(page * pageSize + 1);
  //   setPage(page);
  //   setPageSize(pageSize);
  // }

  return (
    <>
      <GlobitsTable tableHeaders={tableHeaders} tableRows={patients} />
      <div style={{ width: '800px' }}>
        <Pagination
          page={page}
          pageSize={pageSize}
          pageSizes={[10, 20, 30, 40, 50]}
          totalItems={totalPatientCount}
          onChange={({ page, pageSize }) => {
            setNextOffSet(page * pageSize + 1);
            setPage(page);
            setPageSize(pageSize);
          }}
        />
      </div>
    </>
  );
};

export default PatientList;