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 { FlashList } from '@shopify/flash-list';
import DisplayedOnlyCouponTabView from '../../../../component/global/displayedOnlyCouponTabView';
import NotificationTabView from '../../../../component/global/notificationTabViewComponent';

// interface TransactionRecordItem {
//     date: string;
//     title: string;
//     description: string;
// }
// const TransactionRow: React.FC<TransactionRecordItem> = ({ date, description, amount, actual_total_power }) => (
//     <View className="flex flex-row w-full py-4 border-b border-[#CCCCCC]">
//         <Text className="flex-[0.25] text-sm">{date}</Text>
//         <Text className="flex-[0.25] text-sm">{description}</Text>
//         <Text className="flex-[0.25] text-sm text-right">
//             {actual_total_power !== '-' ? Number(actual_total_power).toFixed(1) : actual_total_power}
//         </Text>
//         <Text className="flex-[0.25] text-sm text-right">${Number.isInteger(amount) ? amount : amount.toFixed(1)}</Text>
//     </View>
// );
const NotificationPageComponent = () => {
    const params = useLocalSearchParams();
    const screenHeight = Dimensions.get('window').height;
    const [loading, setLoading] = useState(false);
    const [loading1, setLoading1] = useState(false);
    const { reservationAfter2025, passingThisPromotionToBell } = useLocalSearchParams();
    const parsedReservationAfter2025 = JSON.parse(reservationAfter2025 as string);
    const parsedPassingThisPromotionToBell = JSON.parse(passingThisPromotionToBell as string);
    return (
        <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
            <View style={{ minHeight: screenHeight, flex: 1 }} className="mx-[5%]">
                <View style={{ marginTop: 25 }}>
                    <Pressable
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/optionPage');
                            }
                        }}
                        hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
                    >
                        <CrossLogoSvg />
                    </Pressable>
                    <Text style={{ fontSize: 45, marginVertical: 25 }}>通知</Text>
                </View>
                <View className="flex-1">
                    <NotificationTabView
                        titles={['充電資訊', '活動優惠']}
                        reservationAfter2025={parsedReservationAfter2025}
                        passingThisPromotionToBell={parsedPassingThisPromotionToBell}
                    />
                </View>
            </View>
        </SafeAreaView>
    );
};

export default NotificationPageComponent;