import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import ExifOrientationImg from 'react-exif-orientation-img'

import * as constants from './constants'
import { defaultConfig, defaultStyles } from './config';

class ConfirmationScreen extends Component {
    constructor(props) {
        super(props)

        this.state = {
        }
    }
    
    componentDidUpdate(prevProps, prevState) {
        if (prevState.disableButtons) {
            this.setState({ disableButtons: false })
        }
        if (prevProps.config != this.props.config) {
            this.setState({
                config: this.props.config
            })
        }
    }
    
    render() {
        return (
          <div>
            { 'identity_document_image_mrz' in this.props.images?
            <ExifOrientationImg
                id="identityDocument"
                src={URL.createObjectURL(this.props.images.identity_document_image_mrz)}
                alt="image of document"
                style={defaultStyles.images}
            /> : <></>
            }
            
            <center>
            <h1 style={defaultStyles.title}>Quality Control &#129488;</h1>
            <p style={defaultStyles.textGray}>Please make sure that the ID picture is:</p>
            <ul style={defaultStyles.list}>
                <li>clearly visible</li>
                <li>no glare or hidden parts</li>
            </ul>
            <br />
            
            <table>
            <tbody>
            <tr>
            <td style={{ marginRight: 25 }}>
            <Button
                variant="outlined"
                color="primary"
                style={defaultStyles.buttonOutlined}
                onClick={() => {
                    this.setState({ disableButtons: true })
                    return this.props.retake()
                }}
                disabled={this.state.disableButtons}
              > Retake
            </Button>
            </td>
            <td style={{ marginLeft: 25 }}>
            <Button
                variant="contained"
                color="primary"
                style={defaultStyles.buttonFilled}
                onClick={() => {
                    this.setState({ disableButtons: true })
                    return this.props.confirm()
                }}
                disabled={this.state.disableButtons}
                autoFocus
              > Confirm
            </Button>
            </td>
            </tr>
            </tbody>
            </table>
            </center>
            <br />
            <br />
          </div>
        );
      }
}

export default ConfirmationScreen;