import React from 'react';
import Quagga from '../../../../dist/quagga';

export default class Scanner extends React.Component {
    propTypes = {
        onDetected: React.PropTypes.func,
        onCancel: React.PropTypes.func,
    };

    constructor(props) {
        super(props);
        this._scanner = Quagga
            .decoder({readers: ['code_128_reader']})
            .locator({patchSize: 'medium'})
            .throttle(500)
            .fromSource({
                target: '.overlay__content',
                constraints: {
                    width: 800,
                    height: 600,
                    facingMode: "environment",
                },
            });
    }

    _onCancel = (e) => {
        e.preventDefault();
        if (this._scanUntilResult) {
            this._scanUntilResult.cancel();
            this._scanUntilResult = null;
        }
    }

    componentDidMount() {
        this._scanUntilResult = this._scanner.toPromise();
        this._scanUntilResult.promise
            .then(this.props.onDetected)
            .catch(this.props.onCancel);
    }

    render() {
        return (
            <div className="overlay__content" />
        );
    }

    componentWillUnmount() {
        this._scanner
            .removeEventListener('detected', this.props.onDetected)
            .stop();
    }
}