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

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

import NextActions from './Next/NextActions';
import ScanQRCodeButton from '../../containers/ScanQRCodeButton/ScanQRCodeButton.state';
import green from '../../../style/theme/colors/green';

const styles = theme => ({
  addButton: {
    color: green[200],
    cursor: 'pointer'
  },
  addButtonText: {
    display: 'inline-block'
  },
  next: {
    marginTop: theme.spacing.unit * 8,
    marginBottom: theme.spacing.unit * 8
  },
  visible: {
    opacity: 1
  },
  blur: {
    opacity: 0.1
  }
});

class ConsultationEnd extends PureComponent {
  render() {
    const { classes } = this.props;

    return (
      <Fragment>
        <Grid
          container
          alignItems="center"
          direction="column"
        >
          <Typography
            variant="display1"
            color="inherit"
          >
            {'Successfully'}
            <br />
            {'added to'}
            <br />
            {'passport'}
          </Typography>
          <div className={classes.next}>
            <Typography
              variant="display1"
              color="inherit"
              align="center"
            >
              {'what would you'}
              <br />
              {'like to do next?'}
            </Typography>
            <NextActions title="ADD NEW PATIENT" click={() => console.log('NEW PATIENT CLICKED')} />
            <NextActions title="RETURN TO DASHBOARD" click={() => console.log('RETURN TO DASHBOARD CLICKED')} />
          </div>
          <ScanQRCodeButton />
        </Grid>
      </Fragment>
    );
  }
}

export default withStyles(styles)(ConsultationEnd);