crazycharge-app/app/(auth)/(tabs)/(home)/scanQrPage.tsx

import { CameraView, useCameraPermissions } from 'expo-camera';
import { useEffect, useRef, useState } from 'react';
import {
    Dimensions,
    Pressable,
    ScrollView,
    StyleSheet,
    Text,
    View
} from 'react-native';
import ChooseCarForChargingRow from '../../../../component/global/chooseCarForChargingRow';
import {
    CrossLogoWhiteSvg,
    QuestionSvg
} from '../../../../component/global/SVG';
import { router } from 'expo-router';

const ScanQrPage = () => {
    const [permission, requestPermission] = useCameraPermissions();
    const [scanned, setScanned] = useState(false);
    const viewRef = useRef(null);

    useEffect(() => {
        (async () => {
            const { status } = await requestPermission();
            if (status !== 'granted') {
                alert('Please grant camera permission to use the QR scanner');
            }
        })();
    }, []);

    if (!permission) {
        return <View />;
    }

    if (!permission.granted) {
        return (
            <View className="flex-1 justify-center items-center">
                <Text style={{ textAlign: 'center' }}>
                    We need your permission to access the camera QR code
                    function. Please go to your device settings and enable
                    camera permissions for this application.
                </Text>
            </View>
        );
    }

    const { width: screenWidth, height: screenHeight } =
        Dimensions.get('window');

    const handleBarCodeScanned = ({ bounds, data, type }) => {
        const { origin, size } = bounds;

        // Calculate the size of the square transparent area
        const transparentAreaSize = Math.min(
            screenWidth * 0.6,
            screenHeight * 0.3
        );
        const transparentAreaX = (screenWidth - transparentAreaSize) / 2;
        const transparentAreaY = (screenHeight - transparentAreaSize) / 2;

        // Check if the barcode is within the transparent area
        if (
            origin.x >= transparentAreaX &&
            origin.y >= transparentAreaY &&
            origin.x + size.width <= transparentAreaX + transparentAreaSize &&
            origin.y + size.height <= transparentAreaY + transparentAreaSize
        ) {
            setScanned(true);
            console.log(` type: ${type}            data: ${data} `);
            if (type === 'qr') {
                console.log('QR Code link:', data);
            }
            setTimeout(() => {
                setScanned(false);
            }, 5000);
        }
    };

    const dummyDataChooseCarForCharging = [
        {
            imageUrl: require('../../../../assets/car1.png'),
            VehicleName: 'TESLA - Model 3',
            isDefault: true
        },
        { VehicleName: 'TESLA - Model Y', isDefault: false },
        {
            imageUrl: require('../../../../assets/car1.png'),
            VehicleName: 'TESLA - Model X',
            isDefault: false
        },
        { VehicleName: 'TESLA - Model 3', isDefault: false }
    ];

    const ChooseCar = () => {
        const isLargeScreen = screenHeight >= 800;

        return (
            <View
                style={{
                    ...(isLargeScreen
                        ? {
                              marginTop: '10%',
                              marginBottom: '12%',
                              paddingBottom: 12,
                              backgroundColor: 'rgba(0,0,0,0.7)'
                          }
                        : {
                              marginVertical: '5%',
                              paddingBottom: 12,
                              backgroundColor: 'rgba(0,0,0,0.7)'
                          })
                }}
            >
                <View className="mx-[5%] items-center">
                    <View className="flex-row items-center justify-between  w-full">
                        <View className="pt-2">
                            <Pressable
                                className=""
                                onPress={() => {
                                    if (router.canGoBack()) {
                                        router.back();
                                    } else {
                                        router.replace('mainPage');
                                    }
                                }}
                            >
                                <CrossLogoWhiteSvg />
                            </Pressable>
                        </View>
                        <Text className="text-base text-white pt-2">
                            選擇充電車輛
                        </Text>
                        <Text className="text-xl text-white pt-2"></Text>
                    </View>

                    <ScrollView
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}
                        contentContainerStyle={{
                            alignItems: 'center',
                            flexDirection: 'row',
                            marginVertical: 8
                        }}
                        className="space-x-2"
                    >
                        {dummyDataChooseCarForCharging.map((car, index) => (
                            <ChooseCarForChargingRow
                                navigationLink="/(auth)/(tabs)/(charging)/chargingPage"
                                imageUrl={car.imageUrl}
                                key={`${car.VehicleName}+${index}`}
                                VehicleName={car.VehicleName}
                                isDefault={car.isDefault}
                            />
                        ))}
                    </ScrollView>
                </View>
            </View>
        );
    };

    return (
        <View style={styles.container} ref={viewRef}>
            <CameraView
                style={styles.camera}
                facing="back"
                barcodeScannerSettings={{
                    barcodeTypes: ['qr']
                }}
                onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
                responsiveOrientationWhenOrientationLocked={true}
            >
                <View style={styles.overlay}>
                    <View style={styles.topOverlay}>
                        <ChooseCar />
                    </View>
                    <View style={styles.centerRow}>
                        <View style={styles.leftOverlay}></View>
                        <View style={styles.transparentArea}></View>
                        <View style={styles.rightOverlay} />
                    </View>
                    <View
                        className="items-center justify-between"
                        style={styles.bottomOverlay}
                    >
                        <View>
                            <Text className="text-white text-lg font-bold mt-2 ">
                                請掃瞄充電座上的二維碼
                            </Text>
                        </View>
                        <View className="flex-row space-x-2 items-center ">
                            <QuestionSvg />

                            <Pressable onPress={() => console.log('需要協助?')}>
                                <Text className="text-white text-base">
                                    需要協助?
                                </Text>
                            </Pressable>
                        </View>
                        <View />
                    </View>
                </View>
            </CameraView>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    camera: {
        flex: 1
    },
    overlay: {
        flex: 1
    },
    topOverlay: {
        flex: 35,
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.5)'
    },
    centerRow: {
        flex: 30,
        flexDirection: 'row'
    },
    leftOverlay: {
        flex: 20,
        backgroundColor: 'rgba(0,0,0,0.5)'
    },
    transparentArea: {
        flex: 60,
        aspectRatio: 1,
        position: 'relative'
    },

    rightOverlay: {
        flex: 20,
        backgroundColor: 'rgba(0,0,0,0.5)'
    },
    bottomOverlay: {
        flex: 35,
        backgroundColor: 'rgba(0,0,0,0.5)'
    }
});

export default ScanQrPage;