import React, { Component } from 'react'
import "./LiveFace.scss";
import Grid from '@material-ui/core/Grid';
import faceimage from "./../../../images/face.png";
import { Button } from '@material-ui/core';
import { updateFace } from "./../actions";
import { connect } from "react-redux";
import LinearProgress from '@material-ui/core/LinearProgress';


export class LiveFace extends Component {

    constructor() {
        super();

        this.state = {
            loading: false,
            progress: 0,
        }
    }


    continue = async (e) => {

    }

    componentDidMount = () => {

        const constraints = { video: { facingMode: 'user' } };

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(constraints)
                .then(this.handleSuccess.bind(this)).catch(this.handleError.bind(this));
        }

    }

    handleSuccess = (stream) => {

        console.log(this.refs);
        this.track = stream.getTracks()[0];
        this.refs.video.srcObject = stream;
        this.started = true;

    }

    handleError = (error) => {
        console.error('Error: ', error);
    }

    render() {
        const { handleChange } = this.props;
        return (
            <div id="live">
                <div className="videoContainer">
                        <video ref="video" autoPlay playsInline muted></video>
                    </div>
                    <br />
                    <div className="live-footer">

                        <Button className="live-button" type="submit" variant="contained" onClick={this.start} color="primary">
                                Start Live Face Capture
                        </Button>
                        <br />
                    <LinearProgress variant="determinate" className="progress-bar" value={this.state.progress} />

                    </div>

                <canvas ref="canvas" className="screenshotCanvas"></canvas>

            </div>
        )
    }
}

const mapStateToProps = state => ({
});

export default connect(mapStateToProps, {updateFace})(LiveFace);