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

// app/(auth)/(tabs)/(home)/notificationDetailPage.tsx
import {
    View,
    Text,
    Pressable,
    Image,
    ScrollView,
    Alert,
    ImageBackground,
    ActivityIndicator,
    Dimensions
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router, useLocalSearchParams } from 'expo-router';
import { CrossLogoSvg, PreviousPageBlackSvg } from '../../../../component/global/SVG';
import { useEffect, useState } from 'react';

import { chargeStationService } from '../../../../service/chargeStationService';
import { formatToChineseDateTime } from '../../../../util/lib';
import { useTranslation } from '../../../../util/hooks/useTranslation';
 
const NotificationDetailPage = () => {
    const { t, getCurrentLanguageConfig } = useTranslation(); // 使用翻译钩子
    const isEn = getCurrentLanguageConfig()?.code === 'en';
    const screenHeight = Dimensions.get('window').height;
    const { promotion } = useLocalSearchParams();
    const promotionObj = JSON.parse(promotion as string);
    const [loading, setLoading] = useState(false);
    const [promotionImage, setPromotionImage] = useState('');

    const AdaptiveImage = ({ source }: { source: string }) => {
        const [aspectRatio, setAspectRatio] = useState(1);
        const [error, setError] = useState(false);
        const windowWidth = Dimensions.get('window').width;

        useEffect(() => {
            if (source) {
                // Remote image
                Image.getSize(
                    source,
                    (width, height) => {
                        if (width && height) {
                            setAspectRatio(width / height);
                            setError(false);
                        } else {
                            setError(true);
                            console.error('Invalid image dimensions received');
                        }
                    },
                    (error) => {
                        setError(true);
                        console.error('Error getting image size:', error);
                    }
                );
            } else {
                try {
                    // Local image
                    const dimensions = Image.resolveAssetSource({ uri: source });
                    if (dimensions && dimensions.width && dimensions.height) {
                        setAspectRatio(dimensions.width / dimensions.height);
                        setError(false);
                    } else {
                        setError(true);
                        console.error('Invalid dimensions from resolveAssetSource');
                    }
                } catch (e) {
                    setError(true);
                    console.error('Error resolving asset source:', e);
                }
            }
        }, [source]);

        if (error) {
            return;
        }

        return (
            <Image
                source={{ uri: source }}
                style={{
                    width: windowWidth / 1.1,
                    aspectRatio,
                    resizeMode: 'contain'
                }}
            />
        );
    };
    useEffect(() => {
        setLoading(true);
        const fetchPromotionImage = async () => {
            try {
                const promotionImage = await chargeStationService.getProcessedImageUrl(promotionObj.image_url);
                setPromotionImage(promotionImage);
            } catch (e) {
            } finally {
              setLoading(false);
            }
        };
        fetchPromotionImage();
    }, []);

    return (
        <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
            <ScrollView>
                {loading ? (
                    <View className="items-center justify-center">
                        <ActivityIndicator />
                        <Text>{t('common.loading')}</Text>
                    </View>
                ) : (
                    <View style={{ minHeight: screenHeight, flex: 1 }} className="mx-[5%]">
                        <View style={{ marginTop: 25 }}>
                            <Pressable
                                onPress={() => {
                                    if (router.canGoBack()) {
                                        router.back();
                                    } else {
                                        router.replace('/notificationPage');
                                    }
                                }}
                                hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
                            >
                                <CrossLogoSvg />
                            </Pressable>
                            <Text style={{ fontSize: 45, marginVertical: 25 }}>{t('notifications.charging_detail.title')}</Text>
                        </View>
                        <View className="space-y-2 ">
                            <Text className="text-base lg:text-lg">{isEn?promotionObj.title_en:promotionObj.title}</Text>
                            {promotionImage && (
                                <View className="w-full flex items-center justify-center">
                                    <AdaptiveImage source={promotionImage} />
                                </View>
                            )}

                            <Text className="text-sm">{isEn?promotionObj.text_en:promotionObj.text}</Text>
                            <Text className="text-xs text-gray-500 pt-8 pb-4">
                                {t('notifications.charging_detail.last_updated')}: {formatToChineseDateTime(promotionObj.updatedAt)}
                            </Text>
                        </View>
                    </View>
                )}
            </ScrollView>
        </SafeAreaView>
    );
};

export default NotificationDetailPage;