crazycharge-app/component/homePage/homePage.tsx

import {
    View,
    Text,
    ScrollView,
    FlatList,
    Pressable,
    ActivityIndicator,
    Image,
    Modal,
    Alert,
    TextInput
} from 'react-native';
import NormalButton from '../global/normal_button';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useFocusEffect } from 'expo-router';
import { useColorScheme } from 'nativewind';
import RecentlyBookedScrollView from '../global/recentlyBookedScrollView';
import {
    BellIconSvg,
    HomeIconSvg,
    MyBookingIconSvg,
    MyVehicleIconSvg,
    QrCodeIconSvg,
    VipCodeIconSvg
} from '../global/SVG';
import { AuthContext } from '../../context/AuthProvider';
import { useCallback, useContext, useEffect, useState } from 'react';
import { authenticationService } from '../../service/authService';
import { chargeStationService } from '../../service/chargeStationService';
import { walletService } from '../../service/walletService';
import useUserInfoStore from '../../providers/userinfo_store';
import NormalInput from '../global/normal_input';
import { usePushNotifications } from '../../app/hooks/usePushNotifications';
import { notificationStorage } from '../notificationStorage';

interface HomePageProps {}

const HomePage: React.FC<HomePageProps> = () => {
    const now = new Date();
    const { user } = useContext(AuthContext);
    const { userID, currentPrice, setUserID, setCurrentPrice, setNotifySessionID } = useUserInfoStore();
    const { colorScheme, toggleColorScheme } = useColorScheme();
    const [showLicencePlateMessage, setShowLicencePlateMessage] = useState<boolean>(false);
    const [licensePlate, setLicensePlate] = useState<string>('');
    const [showConfirmationModal, setShowConfirmationModal] = useState<boolean>(false);
    const [showOnboarding, setShowOnboarding] = useState(true);
    const [mainPromotion, setMainPromotion] = useState([]);
    const [mainPromotionImage, setMainPromotionImage] = useState('');
    const [reservationAfter2025, setReservationAfter2025] = useState([]);
    const [isLoadingReservations, setIsLoadingReservations] = useState(true);
    const [unreadCount, setUnreadCount] = useState(0);

    const [passingThisPromotionToBell, setPassingThisPromotionToBell] = useState<any>([]);

    useEffect(() => {
        const fetchIDandCheckLicensePlate = async () => {
            try {
                const response = await authenticationService.getUserInfo();
                //if success, set user ID,
                if (response) {
                    setNotifySessionID(response.data.notify_session_id);
                    setUserID(response.data.id);
                    //after setting id, also check if the user has a valid license plate, if not, show message
                    if (!response.data.cars || !Array.isArray(response.data.cars)) {
                        Alert.alert('無法檢測車輛資訊', '請稍後再試');
                        setShowLicencePlateMessage(false);
                    }
                    if (response.data.cars.length === 1 && response.data.cars[0].license_plate === '0000') {
                        setShowLicencePlateMessage(true);
                    }
                } else {
                    Alert.alert('fail to set user/notification session ID');
                }
            } catch (error) {
                console.log(error);
            }
        };
        const fetchCurrentPrice = async () => {
            try {
                const response = await chargeStationService.getCurrentPrice();
                if (response) {
                    setCurrentPrice(response);
                }
            } catch (error) {
                console.log('main page fetch current price error', error);
            }
        };

        const fetchMainPromotion = async () => {
            try {
                const response = await chargeStationService.getAdvertise();
                if (response) {
                    const mainPromo = response.filter((item: any) => item.is_main)[0];
                    setMainPromotion(mainPromo);

                    if (mainPromo) {
                        const mainPromoImage = await chargeStationService.getProcessedImageUrl(mainPromo.image_url);
                        if (mainPromoImage) {
                            setMainPromotionImage(mainPromoImage);
                        }
                    }
                }
            } catch (error) {
                console.log('Error fetching promotion:', error);
            }
        };
        fetchMainPromotion();
        const fetchWithAllSettled = async () => {
            const results = await Promise.allSettled([
                fetchIDandCheckLicensePlate(),
                fetchCurrentPrice(),
                fetchMainPromotion()
            ]);
            console.log('results of all settled', results);
        };
        fetchWithAllSettled();
    }, []);
    // useEffect(() => {
    //     // Set to light mode on component mount
    //     if (colorScheme === 'dark') {
    //         toggleColorScheme();
    //     }
    // }, []);

    // useEffect(() => {
    //     const fetchCurrentPrice = async () => {
    //         try {
    //             const response = await chargeStationService.getCurrentPrice();
    //             if (response) {
    //                 // console.log('main page fetch current price', response);
    //                 setCurrentPrice(response);
    //             }
    //         } catch (error) {
    //             console.log('main page fetch current price error', error);
    //         }
    //     };
    //     fetchCurrentPrice();
    // }, []);

    // Add new state for modal visibility

    // useEffect(() => {
    //     const fetchMainPromotion = async () => {
    //         try {
    //             const response = await chargeStationService.getAdvertise();
    //             if (response) {
    //                 const mainPromo = response.filter((item: any) => item.is_main)[0];
    //                 setMainPromotion(mainPromo);

    //                 if (mainPromo) {
    //                     const mainPromoImage = await chargeStationService.getProcessedImageUrl(mainPromo.image_url);
    //                     if (mainPromoImage) {
    //                         setMainPromotionImage(mainPromoImage);
    //                     }
    //                 }
    //             }
    //         } catch (error) {
    //             console.log('Error fetching promotion:', error);
    //         }
    //     };
    //     fetchMainPromotion();
    // }, []);

    // useFocusEffect(
    //     useCallback(() => {
    //         let isActive = true;

    //         const fetchData = async () => {
    //             setIsLoadingReservations(true); // Start loading
    //             try {
    //                 const response = await chargeStationService.fetchReservationHistories();
    //                 if (!isActive) return; // Don't update state if component is unfocused

    //                 if (response) {
    //                     const year2025 = new Date('2025-02-01T00:00:00.000Z');
    //                     const reservationAfter2025 = response.filter((r: any) => {
    //                         const date = new Date(r.createdAt);
    //                         return date > year2025;
    //                     });
    //                     setReservationAfter2025(reservationAfter2025);
    //                 }
    //             } catch (error) {
    //                 if (!isActive) return;
    //                 Alert.alert('error fetching reservation');
    //             } finally {
    //                 if (isActive) {
    //                     setIsLoadingReservations(false); // End loading
    //                 }
    //             }
    //         };

    //         fetchData();

    //         return () => {
    //             isActive = false;
    //         };
    //     }, [])
    // );

    useFocusEffect(
        useCallback(() => {
            let isActive = true;
            const fetchData = async () => {
                setIsLoadingReservations(true); // Start loading
                try {
                    const results = await Promise.allSettled([
                        chargeStationService.fetchReservationHistories(),
                        chargeStationService.getAdvertise()
                    ]);

                    if (!isActive) return;

                    // Handle reservation data
                    if (results[0].status === 'fulfilled') {
                        const year2025 = new Date('2025-02-01T00:00:00.000Z');
                        const reservationAfter2025 = results[0].value.filter((r: any) => {
                            const date = new Date(r.createdAt);
                            return date > year2025;
                        });
                        setReservationAfter2025(reservationAfter2025);
                    } else if (results[0].status === 'rejected') {
                        Alert.alert('Error fetching reservations:', results[0].reason);
                    }

                    // Handle promotion data
                    if (results[1].status === 'fulfilled') {
                        const passingThisPromotionToBell = results[1].value.filter((p: any) => p.is_show);
                        setPassingThisPromotionToBell(passingThisPromotionToBell);
                    } else if (results[1].status === 'rejected') {
                        Alert.alert('Error fetching promotions:', results[1].reason);
                    }

                    // Get viewed notifications
                    const viewedNotifications = await notificationStorage.getViewedNotifications();

                    let totalUnread = 0;

                    // Count unread reservations
                    if (results[0].status === 'fulfilled') {
                        const unreadReservations = reservationAfter2025.filter((r: any) => {
                            return !viewedNotifications.some((vn: any) => vn.id === r.id);
                        });
                        totalUnread += unreadReservations.length;
                    }

                    // Count unread promotions
                    if (results[1].status === 'fulfilled') {
                        const unreadPromotions = results[1].value.filter((p) => {
                            return !viewedNotifications.some((vn) => vn.id === p.id);
                        });
                        totalUnread += unreadPromotions.length;
                    }
                    setUnreadCount(totalUnread);
                } catch (error) {
                    if (!isActive) return;
                    Alert.alert('Error fetching data');
                } finally {
                    if (isActive) {
                        setIsLoadingReservations(false);
                    }
                }
            };

            fetchData();

            return () => {
                isActive = false;
            };
        }, [])
    );

    const saveLicensePlate = async (licensePlate: string) => {
        try {
            const response = await chargeStationService.addCar(
                licensePlate,
                '1834d087-bfc1-4f90-8f09-805e3d9422b5',
                'f599470d-53a5-4026-99c0-2dab34c77f39',
                true
            );
            if (response === true) {
                console.log('License plate saved successfully');
            } else {
                Alert.alert('無法保存車牌號碼', '請稍後再試');
            }
        } catch (error) {
            Alert.alert('暫時無法保存車牌號碼', '請稍後再試');
        }
    };
    return (
        <SafeAreaView edges={['top', 'left', 'right']} className="flex-1 bg-white">
            {/* Add Modal component */}
            {mainPromotionImage && (
                <Modal
                    animationType="fade"
                    transparent={true}
                    visible={showOnboarding}
                    onRequestClose={() => setShowOnboarding(false)}
                >
                    <Pressable
                        className="flex-1 bg-black/50 items-center justify-center"
                        onPress={() => setShowOnboarding(false)}
                    >
                        <View className="w-[120%] rounded-2xl ">
                            <Image
                                source={{ uri: mainPromotionImage }}
                                className="w-full aspect-square "
                                resizeMode="contain"
                            />
                            <Text className="text-center mt-4 mb-2 text-gray-200">點擊任意位置關閉</Text>
                        </View>
                    </Pressable>
                </Modal>
            )}

            {showLicencePlateMessage && (
                <Modal
                    animationType="fade"
                    transparent={true}
                    visible={showLicencePlateMessage}
                    onRequestClose={() => setShowLicencePlateMessage(false)}
                >
                    <View className="flex-1 bg-black/50 items-center justify-center">
                        {!showConfirmationModal ? (
                            // License Plate Input Modal
                            <View className="flex flex-col rounded-2xl bg-white overflow-hidden w-[80%]">
                                <View className="bg-[#E3F2F8]">
                                    <Text className="text-base lg:text-lg font-[500] text-center p-4">
                                        請添加您的車牌號碼
                                    </Text>
                                </View>
                                <View className="p-4 ">
                                    <Text className="text-sm lg:text-base font-[500] text-left mb-4">
                                        為更好地為您提供服務，請在您的帳戶中添加車牌號碼。
                                    </Text>
                                    <NormalInput
                                        value={licensePlate}
                                        placeholder="車牌號碼"
                                        onChangeText={(s) => setLicensePlate(s)}
                                        extendedStyle={{ borderRadius: 12, marginBottom: 0 }}
                                        textContentType="none"
                                        autoComplete="off"
                                        keyboardType="default"
                                    />
                                </View>
                                <View className="pr-4 pl-4 pb-4 ">
                                    <NormalButton
                                        title={<Text className="text-white  text-sm lg:text-lg">確定</Text>}
                                        onPress={() => {
                                            console.log('licensePlate', licensePlate);
                                            //here when users click confirm, i want to pop another modal that say you have entered "xxxxxx", click confirm to continue
                                            if (!licensePlate.trim()) {
                                                Alert.alert('請輸入車牌號碼');
                                                return;
                                            }
                                            if (licensePlate.trim().length < 4 || licensePlate.trim().length > 10) {
                                                Alert.alert('無效的車牌號碼', '請輸入有效的車牌號碼');
                                                return;
                                            }
                                            setShowConfirmationModal(true);
                                            console.log('showConfirmationModal', showConfirmationModal);
                                        }}
                                    />
                                </View>
                            </View>
                        ) : (
                            // Confirmation Modal
                            <View className="flex flex-col rounded-2xl bg-white overflow-hidden w-[80%]">
                                <View className="bg-[#E3F2F8]">
                                    <Text className="text-base lg:text-lg font-[500] text-center p-4">
                                        確認車牌號碼
                                    </Text>
                                </View>
                                <View className="p-4">
                                    <Text className="text-sm lg:text-base font-[500] text-center mb-4">
                                        您輸入的車牌號碼為：{licensePlate}
                                    </Text>
                                </View>
                                <View className="flex-row p-4 space-x-4">
                                    <View className="flex-1">
                                        <NormalButton
                                            title={<Text className="text-white text-sm lg:text-lg">取消</Text>}
                                            onPress={() => setShowConfirmationModal(false)}
                                        />
                                    </View>
                                    <View className="flex-1">
                                        <NormalButton
                                            title={<Text className="text-white text-sm lg:text-lg">確認</Text>}
                                            onPress={() => {
                                                saveLicensePlate(licensePlate);
                                                setShowConfirmationModal(false);
                                                setShowLicencePlateMessage(false);
                                                setLicensePlate('');
                                            }}
                                        />
                                    </View>
                                </View>
                            </View>
                        )}
                    </View>
                </Modal>
            )}

            <ScrollView showsVerticalScrollIndicator={false} className="flex-1 mx-[5%] ">
                <View className=" flex-1 pt-8 ">
                    <View className="flex-row items-center pb-4">
                        <HomeIconSvg />
                        <View className="pl-2 flex-1 flex-column ">
                            <View className="flex-row justify-between mr-[10%]">
                                <Text className="text-lg text-left pb-1">你好！</Text>
                                <View className="relative">
                                    {/* <Pressable onPress={() => router.push('notificationPage')}> */}
                                    <Pressable
                                        onPress={() =>
                                            router.push({
                                                pathname: 'notificationPage',
                                                params: {
                                                    reservationAfter2025: JSON.stringify(reservationAfter2025),
                                                    passingThisPromotionToBell:
                                                        JSON.stringify(passingThisPromotionToBell)
                                                }
                                            })
                                        }
                                        disabled={isLoadingReservations}
                                        className="w-10  items-center justify-center"
                                        hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
                                    >
                                        <View className="w-6 h-6">
                                            <BellIconSvg />
                                        </View>
                                        {unreadCount > 0 && (
                                            <View className="absolute -top-2 -right-[0.5] bg-red-500 rounded-full w-5 h-5 items-center justify-center">
                                                <Text className="text-white text-xs font-bold">{unreadCount}</Text>
                                            </View>
                                        )}
                                    </Pressable>
                                </View>
                            </View>
                            <Text className="text-4xl font-light ">{user?.nickname}</Text>
                        </View>
                    </View>
                    <View className=" flex-1 justify-center ">
                        <Pressable onPress={() => router.push('searchPage')}>
                            <View
                                style={{
                                    borderWidth: 1,
                                    padding: 24,
                                    borderRadius: 12,
                                    borderColor: '#bbbbbb',
                                    maxWidth: '100%'
                                }}
                            >
                                <Text style={{ color: '#888888', fontSize: 16 }}>搜尋充電站或地區..</Text>
                            </View>
                        </Pressable>
                    </View>
                </View>
                {/* <View className="flex-1">
                    <RecentlyBookedScrollView />
                </View> */}
                <View className="flex-1">
                    <View className=" my-4">
                        <NormalButton
                            onPress={() => router.push('scanQrPage')}
                            // onPress={() => router.push('optionPage')}
                            title={
                                <View className="flex flex-row space-x-2 items-center">
                                    <QrCodeIconSvg />
                                    <Text className="text-white font-bold text-lg">掃描及充電</Text>
                                </View>
                            }
                            extendedStyle={{
                                alignItems: 'flex-start',
                                padding: 24
                            }}
                        />
                    </View>
                    <View className="flex-1 flex-row justify-between gap-6">
                        <View className="flex-1">
                            <NormalButton
                                // onPress={() => router.push('bookingMenuPage')}
                                onPress={() => Alert.alert('即將推出', '此功能即將推出，敬請期待！')}
                                //onPress={() => notificationStorage.clearStorage()}
                                title={
                                    <View className="flex flex-row space-x-2 items-center ">
                                        <MyBookingIconSvg />
                                        <Text className="text-white font-bold text-lg">我的預約</Text>
                                    </View>
                                }
                                extendedStyle={{
                                    alignItems: 'flex-start',
                                    padding: 24
                                }}
                            />
                        </View>
                        <View className="flex-1">
                            {/* <NormalButton
                                onPress={() => router.push('myVehiclePage')}
                                title={
                                    <View className="flex flex-row space-x-2 items-center">
                                        <MyVehicleIconSvg />
                                        <Text className="text-white font-bold text-lg">我的車輛</Text>
                                    </View>
                                }
                                extendedStyle={{
                                    alignItems: 'flex-start',
                                    padding: 24
                                }}
                            /> */}

                            <NormalButton
                                onPress={() => router.push('accountMainPage')}
                                title={
                                    <View className="flex flex-row space-x-2 items-center">
                                        <MyVehicleIconSvg />
                                        <Text className="text-white font-bold text-lg">我的帳戶</Text>
                                    </View>
                                }
                                extendedStyle={{
                                    alignItems: 'flex-start',
                                    padding: 24
                                }}
                            />
                        </View>
                    </View>
                    <View className="mt-4">
                        <NormalButton
                            // onPress={() => console.log('掃瞄及充電')}
                            onPress={() => router.push('vipQrPage')}
                            title={
                                <View className="flex flex-row items-center space-x-2">
                                    <VipCodeIconSvg />
                                    <Text className="text-white font-bold text-lg">專屬會員二維碼</Text>
                                </View>
                            }
                            extendedStyle={{
                                alignItems: 'flex-start',
                                padding: 24
                            }}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};
export default HomePage;