prokuranepal/inventory_app

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button,Platform } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import HeaderButton from '../components/Component/HeaderButton';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import Colors from '../constants/Colors'
// import * as itemsActions from '../store/actions/items';
import { useDispatch } from 'react-redux';

const ScannerScreen = props => {
    const dispatch = useDispatch();
    const [items, setitems] = useState();
    const [hasPermission, setHasPermission] = useState(null);
    const [scanned, setScanned] = useState(false);

    useEffect(() => {
        (async () => {
            const { status } = await BarCodeScanner.requestPermissionsAsync();
            setHasPermission(status === 'granted');
        })();
    }, []);

    const handleBarCodeScanned = ({ type, data }) => {
        setScanned(true);
        alert(`Bar code has data ${data} has been scanned!`);
        // setitems(items.push('Pantaprazole', '5', 'BGuyz', '30',
        //     'Paracetamol (acetaminophen) is a pain reliever and a fever reducer. The exact mechanism of action of is not known. Paracetamol is used to treat many conditions such as headache, muscle aches, arthritis, backache, toothaches, colds, and fevers.',
        //     'General'))

        setitems(data);
        // console.log("item", data)
        // dispatch(
        //     itemsActions.addItems(
        //         data,
        //         'BGuys',
        //         5,
        //         'Paracetamol (acetaminophen) is a pain reliever and a fever reducer',
        //         30,
        //         'General'

        //     )
        // );
        // alert(`Items has been added to inventory`);
        props.navigation.navigate
            ({
                routeName: 'ReceivedItemList',
                params: {
                    data: data
                }
            })

    };

    if (hasPermission === null) {
        return <Text>Requesting for camera permission</Text>;
    }
    if (hasPermission === false) {
        return <Text>No access to camera</Text>;
    }

    return (
        <View
            style={{
                flex: 1,
                flexDirection: 'column',
                justifyContent: 'flex-end',
            }}>
            <BarCodeScanner
                onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
                data-test="barComp"
                style={StyleSheet.absoluteFillObject}
            />

            {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
        </View>
    );
}

ScannerScreen.navigationOptions = navData => {
    return {
        headerTitle: "Scan to Add item in inventory",
        headerStyle: {
            backgroundColor: Platform.OS === 'android' ? Colors.primaryColor : ''
        },
        headerTitleStyle: {
            fontFamily: 'open-sans'
        },
        // headerLeft: () => (
        //     <HeaderButtons HeaderButtonComponent={HeaderButton} >
        //         <Item title="Menu" iconName="ios-menu" onPress={() => {
        //             navData.navigation.toggleDrawer()
        //         }} />
        //     </HeaderButtons>
        // )
    }
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
    ,

})

export default ScannerScreen;