crazycharge-app/component/accountPages/accountMainPageComponent.tsx

import { View, Text, ScrollView, Image, Switch, Pressable, Dimensions, Linking, Alert, AppState } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useFocusEffect } from 'expo-router';
import { useAuth } from '../../context/AuthProvider';
import * as Notifications from 'expo-notifications';
import { useColorScheme } from 'nativewind';
import Constants from 'expo-constants';
import { useState, useEffect, useCallback } from 'react';
import {
    AccountSettingIconSvg,
    ActivitySvg,
    MyCarSvg,
    DarkModeSvg,
    QuestionMarkIconSvg,
    SettingIconSvg,
    VipCodeIcoonSvg,
    WalletSvg,
    NotificationSvg
} from '../global/SVG';
import { usePushNotifications } from '../../app/hooks/usePushNotifications';
import useUserInfoStore from '../../providers/userinfo_store';
import { authenticationService } from '../../service/authService';

const AccountMainPageComponent = () => {
    const { user, logout } = useAuth();
    const { colorScheme, toggleColorScheme } = useColorScheme();
    const screenWidth = Dimensions.get('window').width;
    const imageWidth = screenWidth * 0.9; // 90% of screen width
    const aspectRatio = 210 / 375;
    const [notificationsEnabled, setNotificationsEnabled] = useState(false);
    const { expoPushToken, notification } = usePushNotifications();
    // const notify_session_id = expoPushToken?.data || '';
    // Check initial notification permission status
    const { notifySessionID } = useUserInfoStore();
    //everytime i am on this screen, i check if permission is granted.
    useFocusEffect(
        useCallback(() => {
            const checkPermissionsAndToken = async () => {
                const { status } = await Notifications.getPermissionsAsync();
                setNotificationsEnabled(status === 'granted');
                if (status === 'granted') {
                    //if status is granted, then i will fetch latest expo token to see if it is the same as notify_session_id
                    const latestToken = await Notifications.getExpoPushTokenAsync({
                        projectId: Constants.expoConfig?.extra?.eas?.projectId
                    });
                    console.log('latestToken.data', latestToken.data);
                    console.log('notifySessionID', notifySessionID);
                    //TODO: if latestToken = notify_session_id, do nothing
                    if (latestToken.data === notifySessionID) {
                        return;
                    } else {
                        const res = await authenticationService.changeNotifySessionID(latestToken.data);
                        if (res) {
                            console.log('Change notifySessionID Successfully!');
                        } else {
                            Alert.alert('更新通知權限失敗', '請稍後再試');
                        }
                    }
                    //TODO: if latestToken != notify_session_id, update notify_session_id to latestToken
                }
            };
            checkPermissionsAndToken();
            const subscription = AppState.addEventListener('change', (nextAppState: string) => {
                if (nextAppState === 'active') {
                    checkPermissionsAndToken();
                }
            });

            return () => {
                subscription.remove();
            };
        }, [expoPushToken]) // Add expoPushToken as a dependency
    );

    const toggleNotifications = async () => {
        Alert.alert('通知設定', '要更改通知設定，請前往手機的設定頁面，允許CrazyCharge通知。', [
            {
                text: '取消',
                style: 'cancel'
            },
            {
                text: '前往設定',
                onPress: () => Linking.openSettings()
            }
        ]);
    };

    return (
        <SafeAreaView className="flex-1 bg-white dark:bg-[#05181C]" edges={['top', 'left', 'right']}>
            <ScrollView className="flex-1 mx-[5%]" showsVerticalScrollIndicator={false}>
                <View style={{ marginTop: 25 }}>
                    <Text style={{ fontSize: 48 }} className="text-black dark:text-white">
                        {user?.nickname}
                    </Text>
                </View>

                <View className="flex-row justify-between mt-4 ">
                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] dark:bg-[#253336] items-center justify-center rounded-xl"
                        onPress={() => router.push('/(account)/(wallet)/walletPage')}
                    >
                        <WalletSvg isDark={colorScheme == 'dark'} />
                        <Text className="text-black dark:text-[#36DFFF]">錢包</Text>
                    </Pressable>

                    {/* <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] items-center justify-center rounded-xl"
                        onPress={() => router.replace('myVehiclePage')}
                    >
                        <MyCarSvg />
                        <Text>我的車輛</Text>
                    </Pressable> */}
                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] dark:bg-[#253336] items-center justify-center rounded-xl"
                        onPress={() => router.replace('vipQrPage')}
                    >
                        <VipCodeIcoonSvg isDark={colorScheme == 'dark'} />
                        <Text className="text-black dark:text-[#36DFFF]">VIP Code</Text>
                    </Pressable>

                    <Pressable
                        className="h-[114px] w-[30%] bg-[#e7f2f8] dark:bg-[#253336] items-center justify-center rounded-xl"
                        onPress={() => router.push('/activityRecordPage')}
                    >
                        <ActivitySvg isDark={colorScheme == 'dark'} />
                        <Text className="text-black dark:text-[#36DFFF]">充電記錄</Text>
                    </Pressable>
                </View>
                <View className="my-4  ">
                    <Pressable onPress={() => router.push('uberVerificationPage')}>
                        <Image
                            resizeMode="contain"
                            source={require('../../assets/uber20008.png')}
                            style={{ width: imageWidth, height: imageWidth * aspectRatio, alignSelf: 'center' }}
                        />
                    </Pressable>
                </View>
                <View className="w-full h-1 bg-[#DBE4E8] dark:bg-[#253336]" />
                <View>
                    <View className="py-4">
                        <Pressable
                            onPress={() => router.push('/accountSettingPage')}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <AccountSettingIconSvg isDark={colorScheme == 'dark'} />
                            <Text className="text-lg pl-2 text-black dark:text-white">帳戶管理</Text>
                        </Pressable>
                    </View>

                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className=" py-4 ">
                        <Pressable
                            onPress={() => router.push('/assistancePage')}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <QuestionMarkIconSvg isDark={colorScheme == 'dark'} />
                            <Text className="text-lg pl-2 text-black dark:text-white">排除解難</Text>
                        </Pressable>
                    </View>
                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className=" py-4 ">
                        <Pressable
                            // onPress={() => router.push('/assistancePage')}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <View className="flex flex-row justify-between w-full">
                                <View className="flex flex-row items-center">
                                    <NotificationSvg isDark={colorScheme == 'dark'} />
                                    <Text className="text-lg pl-2 text-black dark:text-white">允許通知</Text>
                                </View>
                                <Switch value={notificationsEnabled} onChange={toggleNotifications} />
                            </View>
                        </Pressable>
                    </View>
                    {/* <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className=" py-4 ">
                        <Pressable
                            // onPress={() => router.push('/assistancePage')}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <View className="flex flex-row justify-between w-full">
                                <View className="flex flex-row items-center">
                                    <DarkModeSvg isDark={colorScheme == 'dark'} />
                                    <Text className="text-lg pl-2 text-black dark:text-white">深色模式</Text>
                                </View>
                                <Switch value={colorScheme == 'dark'} onChange={toggleColorScheme} />
                            </View>
                        </Pressable>
                    </View> */}
                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                    <View className="py-4">
                        <Pressable
                            onPress={logout}
                            className="flex-row items-center"
                            hitSlop={{
                                top: 10,
                                bottom: 10,
                                left: 10,
                                right: 10
                            }}
                        >
                            <SettingIconSvg isDark={colorScheme == 'dark'} />
                            <Text className="text-lg pl-2 text-black dark:text-white">登出</Text>
                        </Pressable>
                    </View>
                    <View className="h-0.5  bg-[#f4f4f4] dark:bg-[#5E6C70]" />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default AccountMainPageComponent;