import React, { Fragment, PureComponent } from 'react';
import { Field } from 'redux-form';

import Grid from '@material-ui/core/Grid';
import { withStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';
import Button from '@material-ui/core/Button';

import PatientDetailsFields from './Fields/PatientDetailsFields';
import FatButton from '../FatButton/FatButton';

const styles = theme => ({
  title: {
    marginTop: theme.spacing.unit * 9,
    marginBottom: theme.spacing.unit * 6
  },
  submitButton: {
    marginTop: theme.spacing.unit * 8,
    marginBottom: theme.spacing.unit * 8
  }
});

class ClinicianDashboard extends PureComponent {
  state = {}

  render() {
    const { messages, handleSubmit, error, classes, transitToPatients } = this.props
    return (
      <Fragment>
      <Grid
        container
        alignItems="center"
        direction="column"
      >
      <Typography
        variant="display1"
        color="inherit"
        className={classes.title}
      >
        {'Scan an elephant qr code'}
        <br />
        {'or search for a patient'}
      </Typography>
      {error && <Alert messages={messages} type={error} />}
      <form onSubmit={handleSubmit}>
        <PatientDetailsFields />
        <Button
          type="submit"
          color="primary"
          variant="contained"
          className={classes.submitButton}
        >
        search
        </Button>
      </form>
        <FatButton title="SCAN QR CODE" click={() => console.log('scan qr clicked')} variant="contained" color="primary" />
        <FatButton title="NEW PATIENT" click={transitToPatients} variant="contained" color="primary" />
      </Grid>
      </Fragment>
    )
  }
};

export default withStyles(styles)(ClinicianDashboard);