crazycharge-app/component/chargingPage/futureReservationPageComponent.tsx

import { View, Text, ScrollView, StyleSheet, ActivityIndicator } from 'react-native';
import { useEffect, useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import NormalButton from '../global/normal_button';
import { router } from 'expo-router';

import { convertToHKTime } from '../../util/lib';

const FutureReservationPageComponent = ({ data }) => {
    const [loading, setLoading] = useState(false);
    const [stationInfo, setStationInfo] = useState(null);
    const plan = data.book_time === data.end_time ? '充滿停機' : '按每度電結算';
    const kwh = data.total_power === null ? '' : `${data.total_power} kWh`;

    useEffect(() => {
        if (data && data.connector && data.connector.EquipmentID && data.connector.EquipmentID.StationID) {
            try {
                const parsedSnapshot = JSON.parse(data.connector.EquipmentID.StationID.snapshot);
                setStationInfo(parsedSnapshot);
            } catch (error) {
                console.error('Error parsing station snapshot:', error);
            }
        }
    }, [data]);

    return (
        <SafeAreaView edges={['top', 'left', 'right']} className="flex-1 bg-white">
            <ScrollView className="flex-1 mt-8 " nestedScrollEnabled={true} showsVerticalScrollIndicator={false}>
                <View className="mx-[5%]">
                    <View className="">
                        <Text className="text-5xl pt-1 pb-6">暫無充電車輛</Text>

                        {loading ? (
                            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                <ActivityIndicator color="#34657b" />
                            </View>
                        ) : (
                            <>
                                <Text className="text-2xl pb-2 ">你的下一次預約為:</Text>
                                <View className="border-gray-200 border rounded-md">
                                    <View className="flex-1 mt-4 mx-[5%] ">
                                        <View className="flex-1 flex-row items-center pb-3">
                                            <View className="flex-1 flex-column">
                                                <Text style={styles.grayColor} className="text-base">
                                                    日期
                                                </Text>
                                                <Text style={styles.greenColor} className="text-4xl text-center  pt-2">
                                                    {convertToHKTime(data.book_time)
                                                        .hkDate.split('/')
                                                        .reverse()
                                                        .slice(1)
                                                        .join('月')}
                                                </Text>
                                            </View>

                                            <View className="flex-1 flex-column">
                                                <Text style={styles.grayColor} className="text-base pl-7">
                                                    時間
                                                </Text>
                                                <Text style={styles.greenColor} className="text-4xl text-center pt-2">
                                                    {convertToHKTime(data.book_time).hkTime.slice(0, 5)}
                                                </Text>
                                            </View>
                                        </View>
                                        <View className="flex-1 flex-column justify-center space-y-1 pb-3">
                                            <Text style={styles.grayColor} className="text-base">
                                                充電地點
                                            </Text>
                                            <Text style={styles.greenColor} className="text-2xl ">
                                                {stationInfo?.StationName || 'N/A'}
                                            </Text>
                                            <Text style={styles.grayColor} className="text-sm">
                                                {stationInfo?.Address || 'N/A'}
                                            </Text>
                                        </View>
                                        <View className="flex-1 flex-row  pb-3  ">
                                            <View className="flex-column flex-1">
                                                <Text style={styles.grayColor} className="text-base">
                                                    方案
                                                </Text>

                                                <Text style={styles.greenColor} className="text-lg">
                                                    {plan}
                                                </Text>
                                                <Text style={styles.grayColor} className="text-sm">
                                                    {kwh}
                                                </Text>
                                            </View>
                                            <View className="flex-column flex-1">
                                                <Text style={styles.grayColor} className="text-base">
                                                    車輛
                                                </Text>
                                                <Text style={styles.greenColor} className="text-lg">
                                                    {data.car.car_brand.name}
                                                </Text>
                                                <Text style={styles.greenColor} className="text-lg">
                                                    {data.car.car_type.name}
                                                </Text>
                                            </View>
                                        </View>
                                    </View>
                                </View>
                                <View className="pt-6">
                                    <NormalButton
                                        title={<Text className="text-white text-lg">返回主頁</Text>}
                                        onPress={() => router.push('mainPage')}
                                    />
                                </View>
                            </>
                        )}
                        {/* <View className="pt-12">
                            <Text>*************************</Text>
                            <Text className="pb-6">以下為測試專用</Text>
                            <NormalButton
                                title={<Text className="text-white text-lg ">進入"充電進行中"界面</Text>}
                                onPress={() => router.push('testonly')}
                            />
                        </View> */}
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};
const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    }
});

export default FutureReservationPageComponent;