import React from 'react';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { withStyles } from '@material-ui/core/styles';

import FloatingActionButton from '../../FloatingActionButton/FloatingActionButton';
import UsersTableHead from './UsersTableHead/UsersTableHead';
import green from '../../../../style/theme/colors/green';

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  tableWrapper: {
    overflowX: 'auto',
  },
  admin: {
    color: green[200]
  },
  nurse: {
    color: 'red'
  },
  doctor: {
    color: 'pink'
  },
  manager: {
    color: 'orange'
  },
  actionbutton: {
    position: 'absolute',
    right: theme.spacing.unit * 4,
    bottom: theme.spacing.unit * 4
  }
});


class UsersTable extends React.Component {
  state = {
    order: 'asc',
    orderBy: 'firstName',
    selected: [],
    page: 0,
    rowsPerPage: 10,
  };

  componentDidMount() {
    const { fetchUsers, fetchRoles, roles } = this.props;
    const pageId = 1;
    const limit = 10;
    if (Object.keys(roles).length < 1) fetchRoles();
    fetchUsers({ pageId, limit });
  }

  handleRequestSort = (event, property) => {
    const orderBy = property;
    let order = 'desc';

    this.setState((currentState) => {
      if (currentState.orderBy === property && currentState.order === 'desc') {
        order = 'asc';
      }
      return { order, orderBy };
    });
  };

  handleSelectAllClick = (event, checked) => {
    if (checked) {
      this.setState(state => ({ selected: state.users.map(n => n.id) }));
      return;
    }
    this.setState({ selected: [] });
  };

  handleClick = (event, id) => {
    const { selected } = this.state;
    const selectedIndex = selected.indexOf(id);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, id);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1),
      );
    }

    this.setState({ selected: newSelected });
  };

  handleChangePage = (event, page) => {
    this.setState({ page });
  };

  handleChangeRowsPerPage = (event) => {
    this.setState({ rowsPerPage: event.target.value });
  };

  render() {
    const {
      order, orderBy, selected, rowsPerPage, page
    } = this.state;
    const {
      users, roles, classes, transitToCreateUser,
      transitToCreatePatient
    } = this.props;
    const count = Object.keys(roles).length;
    return (
      <Paper className={classes.root}>
        <TablePagination
          component="div"
          count={users.length}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            'aria-label': 'Previous Page',
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page',
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
        />
        <div className={classes.tableWrapper}>
          <Table aria-labelledby="tableTitle">
            <UsersTableHead
              numSelected={selected.length}
              order={order}
              orderBy={orderBy}
              onRequestSort={this.handleRequestSort}
              rowCount={users.length}
            />
            <TableBody>
              {users
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map(user => (
                  <TableRow
                    hover
                    onClick={event => this.handleClick(event, user.id)}
                    tabIndex={-1}
                    key={user.id}
                  >
                    <TableCell component="th" scope="row">
                      {user.firstname}
                    </TableCell>
                    <TableCell>
                      {user.lastname}
                    </TableCell>
                    <TableCell>
                      {user.email}
                    </TableCell>
                    {(count > 0)
                      ? (
                        <TableCell>
                          <p className={classes[roles[user.role_id].name.toLowerCase()]}>
                            {roles[user.role_id].name}
                          </p>
                        </TableCell>
                      ) : (
                        <TableCell>
Not available
                        </TableCell>
                      )
                    }
                  </TableRow>
                ))}
            </TableBody>
          </Table>
        </div>
        <div className={classes.actionButton}>
          <FloatingActionButton menuItems={roles} transitToCreatePatient={transitToCreatePatient} transitToCreateUser={transitToCreateUser} />
        </div>
      </Paper>
    );
  }
}

export default withStyles(styles)(UsersTable);