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

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

    constructor(props) {
        super(props);
        this._scanner = Quagga
            .config(props.config)
            .fromSource({
                ...this.props.config.inputStream,
                target: '.overlay__content',
            });
    }

    _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();
    }
}