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

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

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

    useEffect(() => {
        (async () => {
            const { status } = await requestPermission();
            if (status !== 'granted') {
                alert('需要相機權限以掃描QR碼');
            }
        })();
    }, []);

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

    if (!permission.granted) {
        return (
            <View className="flex-1 justify-center items-center">
                <Text style={{ textAlign: 'center' }}>需要相機權限以掃描QR碼，請在設定中開啟相機權限</Text>
            </View>
        );
    }

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

    const handleBarCodeScanned = ({ bounds, data, type }: { bounds: any; data: any; type: any }) => {
        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);
            setScannedResult(data);
            Vibration.vibrate(100);
            console.log(` type: ${type}            data: ${data} `);

            startCharging(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 [loading, setLoading] = useState(false);
        const isLargeScreen = screenHeight >= 800;
        const [carData, setCarData] = useState([]);
        const defaultImageUrl = require('../../../../assets/car1.png');
        const [selectedCar, setSelectedCar] = useState('');
        useEffect(() => {
            const fetchAllCars = async () => {
                setLoading(true);
                try {
                    const response = await chargeStationService.getUserCars();

                    if (response) {
                        // console.log(response.data);
                        const carTypes = response.data.map((item: any) => ({
                            id: item.id,
                            name: item.car_type.name,
                            image: item.car_type.type_image_url
                        }));

                        // console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', carTypes);
                        let updatedCarTypes = [...carTypes];

                        for (let i = 0; i < carTypes.length; i++) {
                            const car = updatedCarTypes[i];
                            const imageUrl = await chargeStationService.getProcessedImageUrl(car.image);
                            updatedCarTypes[i] = {
                                ...car,
                                image: imageUrl
                            };
                        }

                        setCarData(updatedCarTypes);
                        return true;
                    }
                } catch (error) {
                    console.log(error);
                } finally {
                    setLoading(false);
                }
            };
            fetchAllCars();
        }, []);

        useEffect(() => {
            console.log('Current carData:', carData);
        }, [carData]);

        // useEffect(() => {
        //     console.log('Current selectedCar:', selectedCar);
        // }, [selectedCar]);

        return (
            <View
                style={{
                    ...(isLargeScreen
                        ? {
                              marginTop: '10%',
                              marginBottom: '12%',
                              paddingBottom: 12
                          }
                        : {
                              flex: 1,
                              alignItems: 'center',
                              justifyContent: 'center'
                          })
                }}
            >
                <View className="justify-center items-center flex-1 ">
                    <View
                        style={{
                            ...(isLargeScreen
                                ? {}
                                : {
                                      backgroundColor: 'rgba(0,0,0,0.7)'
                                  })
                        }}
                    >
                        {loading ? (
                            <View className="w-full">
                                <ActivityIndicator color="#34657b" />
                            </View>
                        ) : (
                            <View className="w-full bg-[#000000B3]">
                                <View className="flex-row items-center justify-between mx-[5%] ">
                                    <Pressable
                                        className="pt-4 "
                                        onPress={() => {
                                            if (router.canGoBack()) {
                                                router.back();
                                            } else {
                                                router.replace('mainPage');
                                            }
                                        }}
                                    >
                                        <CrossLogoWhiteSvg />
                                    </Pressable>

                                    <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: 12
                                    }}
                                    className="space-x-2 mx-[5%]"
                                >
                                    {carData.map((car, index) => (
                                        <ChooseCarForChargingRow
                                            key={`${car.name}+${index}`}
                                            image={car.image}
                                            onPress={() => setSelectedCar(car.id)}
                                            isSelected={selectedCar === car.id}
                                            // imageUrl={image}
                                            VehicleName={car.name}
                                            isDefault={car.isDefault}
                                        />
                                    ))}
                                </ScrollView>
                            </View>
                        )}
                    </View>
                </View>
            </View>
        );
    };

    //scan==> retrieve string ==> PUT charge/start requrest ==>

    const startCharging = async (scannedResult: string) => {
        try {
            const requestToBeSent = {
                StartChargeSeq: 'what is this',
                ConnectorID: scannedResult,
                StopBy: 'what is this',
                StopValue: 'what is this',
                StartBalance: 'what is this'
            };
            const response = await chargeStationService.startCharging(requestToBeSent);
            console.log('Charging started', response);

            // ADD NAVIGATE TO NEW PAGE HERE
        } catch (error) {
            console.log('Failed to start charging:', error);
        }
    };

    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={() => router.push('assistancePage')}>
                                <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;