import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  root: {
    fontDamily: ['Work Sans', 'sans-serif'].join(','),
  },
  cardText: {
    fontDamily: ['Work Sans SemiBold', 'sans-serif'].join(','),
    fontSize: '8pt',
    fontWeight: '600',
    textAlign: 'center',
    height: '22.5mm',
    width: '45mm',
    display: 'flex',
    flexDirection: 'column',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: '160mm',
    position: 'absolute',
    top: '7.5mm',
  },
  uid: {
    fontDamily: ['Work Sans Regular', 'sans-serif'].join(','),
    marginTop: '0.9em'
  },
  qrCodeContainer: {
    height: '45mm',
    width: '45mm',
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: '35.5mm',
    left: '160mm',
  },
  qrcode: {
    height: '32mm',
    width: '32mm',
  },
  hello: {
    fontDamily: ['Work Sans SemiBold', 'sans-serif'].join(','),
    fontWeight: '600',
    fontSize: '24pt',
    height: '19mm',
    width: '136mm',
    lineHeight: '19mm',
    position: 'absolute',
    left: '15mm',
    top: '80.5mm',
  },
  pinCode: {
    fontDamily: ['Work Sans Bold', 'sans-serif'].join(','),
    fontWeight: '600',
    fontSize: '24pt',
    width: '57.5mm',
    height: '15.5mm',
    lineHeight: '15.5mm',
    textAlign: 'center',
    letterSpacing: '10pt',
    position: 'absolute',
    top: '271.5mm',
    left: '76mm'
  }
};
// eslint-disable-next-line react/prefer-stateless-function
class PassportContent extends React.Component {
  render() {
    const {
      passport: {
        firstname, lastname, uid, qrCode, pin
      },
      classes
    } = this.props;
    return (
      <div className={classes.root}>
        <div className={classes.card}>
          <div className={classes.cardText}>
            <div>
              {firstname}
            </div>
            <div>
              {lastname}
            </div>
            <div className={classes.uid}>
              {uid}
            </div>
          </div>
          <div className={classes.qrCodeContainer}>
            <img className={classes.qrcode} src={qrCode} alt="passportQrCode" />
          </div>
        </div>
        <div className={classes.hello}>
          {firstname}
        </div>
        <div className={classes.pinCode}>
          {pin}
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(PassportContent);