import * as React from 'react'
import UserTableRow from './users-table-row';
import { Table, Visibility, Loader } from 'semantic-ui-react'

export interface UsersTableProps {
  items: any[];
  totalPages: number;
  onDeleteUser: Function;
  getNextPage: Function;
  onEditUser: Function;
  loading: boolean;
  roles: any[];
}
export default class UsersTable extends React.Component<UsersTableProps, {}> {
  renderItem(item) {
    return (
      <UserTableRow
        id={item.id}
        name={item.name}
        roleIds={item.roleIds}
        email={item.email}
        createdAt={item.createdAt}
        lastLogin={item.lastLogin}
        profileImageUrl={item.profileImageUrl}

        roles={this.props.roles}
        onEditUser={this.props.onEditUser}
        onDeleteUser={this.props.onDeleteUser}

      />
    )
  }

  fetchMoreItems = () => {
    this.props.getNextPage && this.props.getNextPage();
  }

  render() {
    const { items, loading } = this.props;

    return (
      <div>
        <Table singleLine className="users-table">
          <Visibility
            as="tbody"
            continuous={false}
            once={false}
            onBottomVisible={() => this.fetchMoreItems()}>
            {items.map(i => this.renderItem(i))}
          </Visibility>
        </Table>
        {loading && <Loader size="mini" active inline='centered' />}
      </div>
    )
  }
}