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

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

class Selfie extends Component {

    constructor(props) {
        super(props)

        this.state = {
            config: this.props.config,
            disableButtons: false,
        }
    }
    
    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>
            <center>
            <img
                src={this.state.config.resources.images.image_selfie}
                height={window.innerHeight / 2}
                alt="selfie instructions"
                style={{ marginTop: 75 }}>
            </img>
            <h1 style={defaultStyles.title}>We just need to see your pearly whites</h1>
            <Button
                variant="contained"
                color="primary"
                style={defaultStyles.buttonFilled}
                disabled={this.state.disableButtons}
                onClick={() => {
                    this.setState({ disableButtons: true })
                    this.props.takeSelfie()
                }}
              > Take Selfie
            </Button>
            </center>
            <br />
            <br />
            </div>
        );
      }
}

export default Selfie;