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

import { CameraView, useCameraPermissions } from 'expo-camera';
import { useEffect, useRef, useState } from 'react';
import {
    ActivityIndicator,
    Alert,
    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';
import { authenticationService } from '../../../../service/authService';
import { walletService } from '../../../../service/walletService';
import useUserInfoStore from '../../../../providers/userinfo_store';
const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const ChooseCar = ({ carData, loading, selectedCar, setSelectedCar }) => {
    const isLargeScreen = screenHeight >= 800;
    const defaultImageUrl = require('../../../../assets/car1.png');

    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-screen  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);
                                            console.log(car.id);
                                        }}
                                        isSelected={selectedCar === car.id}
                                        // imageUrl={image}
                                        VehicleName={car.name}
                                        isDefault={car.isDefault}
                                    />
                                ))}
                            </ScrollView>
                        </View>
                    )}
                </View>
            </View>
        </View>
    );
};
const ScanQrPage = () => {
    const { userID, setUserID } = useUserInfoStore();
    // State declarations
    const [permission, requestPermission] = useCameraPermissions();
    const [scanned, setScanned] = useState(false);
    const viewRef = useRef(null);
    const [scannedResult, setScannedResult] = useState('');
    const [selectedCar, setSelectedCar] = useState('');

    const now = new Date();
    const [loading, setLoading] = useState(true);
    const [loading2, setLoading2] = useState(false);
    const [loading3, setLoading3] = useState(false);
    const [carData, setCarData] = useState([]);

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

    // Effect for fetching user's cars
    useEffect(() => {
        const fetchAllCars = async () => {
            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('carTypes', carTypes);
                    // 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);
                    // console.log('updatedCarTypes', updatedCarTypes);
                    return true;
                }
            } catch (error) {
                console.log(error);
            } finally {
                setLoading(false);
            }
        };
        fetchAllCars();
    }, []);

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

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

    // Function to handle barcode scanning
    const handleBarCodeScanned = async ({ 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}  typeofData ${typeof data}`);

            try {
                const response = await chargeStationService.getTodayReservation();
                if (response) {
                    const now = new Date();

                    const onlyThisConnector = response.filter(
                        (reservation: any) => reservation.connector.ConnectorID === data
                    );

                    onlyThisConnector.sort((a: any, b: any) => {
                        const timeA = new Date(a.book_time).getTime();
                        const timeB = new Date(b.book_time).getTime();
                        return timeA - timeB;
                    });

                    let previousReservation = null;
                    let upcomingReservation = null;

                    for (let i = 0; i < onlyThisConnector.length; i++) {
                        const reservationTime = new Date(onlyThisConnector[i].book_time).getTime();
                        if (reservationTime <= now.getTime()) {
                            previousReservation = onlyThisConnector[i];
                        } else {
                            upcomingReservation = onlyThisConnector[i];
                            break;
                        }
                    }

                    const relevantReservations = [previousReservation || null, upcomingReservation || null];

                    console.log('Relevant reservations:', relevantReservations);

                    const getNearestSlot = (date: Date) => {
                        const minutes = date.getMinutes();
                        const nearestSlot = new Date(date);
                        nearestSlot.setMinutes(minutes < 30 ? 0 : 30);
                        nearestSlot.setSeconds(0);
                        nearestSlot.setMilliseconds(0);
                        return nearestSlot;
                    };

                    const currentSlot = getNearestSlot(now);
                    const nextSlot = new Date(currentSlot.getTime() + 30 * 60 * 1000);

                    const AreOrdersAdjacentToNow = relevantReservations.map((reservation, index) => {
                        if (!reservation) return false;

                        const reservationTime = new Date(reservation.book_time);
                        return index === 0
                            ? reservationTime.getTime() === currentSlot.getTime()
                            : reservationTime.getTime() === nextSlot.getTime();
                    });

                    console.log('AreOrdersAdjacentToNow:', AreOrdersAdjacentToNow);

                    if (!AreOrdersAdjacentToNow[0] && !AreOrdersAdjacentToNow[1]) {
                        console.log('Charging machine is available. Starting charging process...');
                        startCharging(data);
                    } else if (AreOrdersAdjacentToNow[0]) {
                        const previousReservation = relevantReservations[0];
                        if (previousReservation && previousReservation.user.id === userID) {
                            const reservationTime = new Date(previousReservation.book_time);
                            const timeDifference = now.getTime() - reservationTime.getTime();
                            const minutesDifference = timeDifference / (1000 * 60);

                            if (minutesDifference <= 15) {
                                console.log('User arrived within 15 minutes of their reservation.');
                                startCharging(data);
                            } else {
                                console.log('User arrived more than 15 minutes late for their reservation.');
                                if (!AreOrdersAdjacentToNow[1]) {
                                    console.log('Next slot is available. Allowing charging despite late arrival.');
                                    startCharging(data);
                                } else {
                                    Alert.alert(
                                        '預約已過期',
                                        '您的預約時間已經過期，且下一個時段已被預約。請重新預約。'
                                    );
                                    console.log('Next slot is not available. Charging not allowed.');
                                }
                            }
                        } else {
                            Alert.alert('無法使用', '此充電槍已經被預約，請選擇其他位置');
                        }
                    } else if (AreOrdersAdjacentToNow[1]) {
                        const upcomingReservation = relevantReservations[1];
                        if (upcomingReservation && upcomingReservation.user.id === userID) {
                            const minutesUntilReservation =
                                (new Date(upcomingReservation.book_time).getTime() - now.getTime()) / (1000 * 60);
                            if (minutesUntilReservation <= 5) {
                                console.log('User arrived slightly early for their upcoming reservation.');
                                startCharging(data);
                            } else {
                                Alert.alert(
                                    '預約時間未到',
                                    `您的預約時間還有 ${Math.round(minutesUntilReservation)} 分鐘開始。請稍後再試。`
                                );
                            }
                        } else {
                            Alert.alert('已被預約', '此充電槍已被其他用戶預約。請選擇其他位置。');
                        }
                    } else {
                        Alert.alert('無法使用', '此充電槍目前無法使用。請選擇其他位置或稍後再試。');
                    }
                } else {
                    console.log('No response from getTodayReservation');
                    Alert.alert('系統錯誤', '無法獲取預約信息。請稍後再試。');
                }
            } catch (error) {
                console.error("Error fetching today's reservations:", error);
                Alert.alert('系統錯誤', '發生未知錯誤。請稍後再試。');
            }

            setTimeout(() => {
                setScanned(false);
            }, 2000);
        }
    };

    //prepare data for submission
    const dataForSubmission = {
        stationID: '2405311022116801000',
        connector: scannedResult,
        user: userID,
        book_time: now,
        end_time: now,
        total_power: 0,
        total_fee: 0,
        promotion_code: '',
        car: selectedCar,
        type: 'walking',
        is_ic_call: false
    };

    const startCharging = async (scanResult: string) => {
        try {
            if (selectedCar === '') {
                Alert.alert('請選擇車輛');
                return;
            }

            const response = await walletService.submitPayment(
                dataForSubmission.stationID,
                scanResult,
                dataForSubmission.user,
                dataForSubmission.book_time,
                dataForSubmission.end_time,
                dataForSubmission.total_power,
                dataForSubmission.total_fee,
                dataForSubmission.promotion_code,
                dataForSubmission.car,
                dataForSubmission.type,
                dataForSubmission.is_ic_call
            );

            if (response) {
                console.log('Charging started from startCharging', response);
                router.push('(auth)/(tabs)/(charging)/chargingPage');
            } else {
                console.log('Failed to start chargi12312312ng:', response);
                Alert.alert('掃描失敗 請稍後再試。', response);
            }
        } catch (error) {
            console.log('Failed to start charging:', error);
        }
    };

    return (
        <View style={styles.container} ref={viewRef}>
            {loading ? (
                <View className="flex-1 items-center justify-center">
                    <ActivityIndicator />
                </View>
            ) : (
                <CameraView
                    style={styles.camera}
                    facing="back"
                    barcodeScannerSettings={{
                        barcodeTypes: ['qr']
                    }}
                    onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
                    responsiveOrientationWhenOrientationLocked={true}
                >
                    <View style={styles.overlay}>
                        <View style={styles.topOverlay}>
                            <ChooseCar
                                carData={carData}
                                loading={loading}
                                selectedCar={selectedCar}
                                setSelectedCar={setSelectedCar}
                            />
                        </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-center">
                                    請選擇充電車輛{'\n'}及掃瞄充電座上的二維碼
                                </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;