import React, { PureComponent, Fragment } from 'react';

import { Typography, Grid, GridItem, withStyles } from '@material-ui/core';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

import PatientDetails from './PatientDetails/PatientDetails';

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
});

class PatientsTable extends PureComponent {
  componentDidMount() {
    const { query } = this.props.location;
    const { patients } = this.props;
    const pageId = query.pageId;
    delete query.pageId;
    const { searchPatientsBegin } = this.props
    if (Object.keys(patients).length < 1) searchPatientsBegin({ pageId, queryStrings: {...query} })
  }

  handleClick = (id) => {
    const { transitToPatientDetails } = this.props;
    transitToPatientDetails(id);
  }

  render() {
      const { classes, patients } = this.props;
      console.log('PATIENT', patients);
    return (
      <Fragment>
      <Paper className={classes.root}>
      <Typography
        variant="display1"
      >  {'Patients'}
      </Typography>
      <Table className={classes.table}>
       <TableHead>
           <TableCell>Names</TableCell>
       </TableHead>
       <TableBody>
         {patients.map(patient => (
             <TableRow key={patient.self}>
               <TableCell component="th" scope="patient">
                 <PatientDetails
                   key={patient.self}
                   firstname={patient.firstname}
                   lastname={patient.lastname}
                   middlename={patient.middlename}
                   gender={patient.gender}
                   dob={patient.dob}
                   click={() => this.handleClick(patient.self)}
                 />
               </TableCell>
             </TableRow>
         ))}
       </TableBody>
     </Table>
   </Paper>
   </Fragment>
    )
  }
};

export default withStyles(styles)(PatientsTable);