import React, { Component } from 'react';
import Button from '@material-ui/core/Button';

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

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

        this.state = {
            config: this.props.config,
            disableButtons: false,
        }
    }
    
    componentDidUpdate(prevProps, prevState) {
        if (prevProps.config != this.props.config) {
            this.setState({
                config: this.props.config
            })
        }
    }

    render() {
        return (<div>
                <center>
                <div style={{ marginTop: 75 }} >
                <h1 style={defaultStyles.title} > {this.state.config.ui.documentTitle} </h1>
                <h2 style={defaultStyles.subTitle}> {this.state.config.ui.documentSubTitle} </h2>
                </div>
                 
                <table>
                <tbody>
                <tr>
                <td>
                <Button
                    variant="outlined"
                    color="primary"
                    style={defaultStyles.documentTypes}
                    onClick={() => {
                        this.setState({ disableButtons: true })
                        this.props.selectDocument(constants.ID_FRONT)
                    }}
                    disabled={this.state.disableButtons}
                >
                    <img
                        src={this.state.config.resources.images.icon_id}
                        width="50"
                        alt="logo id"
                        stlye={defaultStyles.buttonContent} />
                    <p style={defaultStyles.buttonContent}> ID / Residence Permit </p>
                </Button>
                </td>
                </tr>
                
                <tr>
                <td>
                <Button
                    variant="outlined"
                    color="primary"
                    style={defaultStyles.documentTypes}
                    onClick={() => {
                        this.setState({ disableButtons: true })
                        this.props.selectDocument(constants.VISA)
                    }}
                    disabled={this.state.disableButtons}
                >
                    <img
                        src={this.state.config.resources.images.icon_id}
                        width="50"
                        alt="logo id"
                        style={defaultStyles.buttonContent} />
                     <p style={defaultStyles.buttonContent}> Visa </p>
                </Button>
                </td>
                </tr>
                
                <tr>
                <td>
                <Button
                    variant="outlined"
                    color="primary"
                    style={defaultStyles.documentTypes}
                    onClick={() => {
                        this.setState({ disableButtons: true })
                        this.props.selectDocument(constants.PASSPORT)
                    }}
                    disabled={this.state.disableButtons}
                >
                    <img
                        src={this.state.config.resources.images.icon_passport}
                        width="50"
                        alt="logo id"
                        style={defaultStyles.buttonContent} />
                     <p style={defaultStyles.buttonContent}> Passport </p>
                </Button>
                </td>
                </tr>
                
                <tr>
                <td>
                <Button
                    variant="outlined"
                    color="primary"
                    style={defaultStyles.documentTypes}
                    onClick={() => {
                        this.setState({ disableButtons: true })
                        this.props.selectDocument(constants.OTHER)
                    }}
                    disabled={this.state.disableButtons}
                >
                    <img
                        src={this.state.config.resources.images.icon_other}
                        width="50"
                        alt="logo id"
                        style={defaultStyles.buttonContent} />
                     <p style={defaultStyles.buttonContent}> Other </p>
                </Button>
                </td>
                </tr>
                </tbody>
                </table>
                </center>
                <br />
                <br />
                </div>);
    }
}


export default DocumentSelection;