import React, { Fragment, PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';

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 NextActions from './Next/NextActions';
import PassportPrint from '../../containers/PassportPrint/PassportPrint.state';
import green from '../../../style/theme/colors/green';

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


class PassportComplete extends PureComponent {
  state = {
    printed: false
  }

  // create print clicked handler
  handlePrintToggle = () => {
    this.setState({ printed: true });
  };

  render() {
    const {
      classes, transitToPatients, transitToConsultation
    } = this.props;
    const {
      printed
    } = this.state;

    return (
      <Fragment>
        <Grid
          container
          alignItems="center"
          direction="column"
        >

          <FormattedMessage id="page.passportComplete.title" />
          <Typography
            variant="display1"
            color="inherit"
          >
            {'Passport'}
            <br />
            {'Complete'}
          </Typography>
          <PassportPrint
            onAfterPrint={this.handlePrintToggle}
            triggerComponent={(
              <Button
                type="button"
                color="primary"
                variant="contained"
                className={classes.printButton}
              >
            Print
              </Button>
              )}
          />
          <div
            className={printed ? classes.visible : classes.blur}
          >
            <FormattedMessage id="page.passportComplete.subTitle" />
            <Typography
              variant="display1"
              color="inherit"
              align="center"
            >
              {'what would you'}
              <br />
              {'like to do next?'}
            </Typography>
            <NextActions title="ADD NEW PATIENT" click={transitToPatients} disabled={!printed} />
            <NextActions title="BEGIN CONSULATION" click={transitToConsultation} disabled={!printed} />
          </div>
        </Grid>
      </Fragment>
    );
  }
}

export default withStyles(styles)(PassportComplete);