import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {BarCodeScanner, Permissions} from 'expo';

export default class App extends React.Component {
    state = {
        hasCameraPermission: null,
    }

    async componentWillMount() {
        const {status} = await Permissions.askAsync(Permissions.CAMERA);
        this.setState({hasCameraPermission: status === 'granted'});
    }

    render() {
        const {hasCameraPermission} = this.state;

        if (hasCameraPermission === null) {
            return <Text>Requesting for camera permission</Text>;
        } else if (hasCameraPermission === false) {
            return <Text>No access to camera</Text>;
        } else {
            return (
                <View style={{flex: 1}}>
                    <View style={{flex: 0.2, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={{fontSize: 25}}>HELLO QR SCANNER</Text>
                    </View>
                    <View style={{flex: 0.6}}>
                        <BarCodeScanner
                            onBarCodeRead={this._handleBarCodeRead}
                            style={StyleSheet.absoluteFill}
                        />
                    </View>
                    <View style={{flex: 0.2}}/>
                </View>
            );
        }
    }

    _handleBarCodeRead = ({type, data}) => {
        // หลังจากที่มันอ่าน data ได้ ให้ handle api ตรงนี้ต่อเลย
        alert(data);
    }
}