crazycharge-app/component/chargingPage/chargingPageComponent.tsx

import { View, Text, ScrollView, StyleSheet, Image, ActivityIndicator } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import RippleEffectBatteryIcon from '../global/rippleEffectBatteryIcon';
import LoadingDots from '../global/loadingDots';
import NormalButton from '../global/normal_button';
import { router } from 'expo-router';
import { BatteryIconSvg, LightingLogoSvg, TemperatureIconSvg } from '../global/SVG';
import { useEffect, useState } from 'react';
import { chargeStationService } from '../../service/chargeStationService';
import { set } from 'date-fns';
import { convertToHKTime } from '../../util/lib';
import ChargingPenaltyPageComponent from './chargingPenaltyComponent';

const ChargingPageComponent = ({ data }) => {
    const reservationData = Array.isArray(data) ? data[0] : data;
    const [isLoading, setIsLoading] = useState(true);
    const [onGoingChargingData, setOnGoingChargingData] = useState();

    useEffect(() => {
        const fetchOngoingChargingData = async () => {
            setIsLoading(true);
            try {
                const response = await chargeStationService.fetchOngoingChargingData(reservationData.format_order_id);
                if (response) {
                    setOnGoingChargingData(response);
                    console.log('i am ongoingchargingdata', response);
                } else {
                    console.log('error fetching data');
                }
            } catch (error) {
                console.error('Error fetching reservation histories:', error);
            } finally {
                setIsLoading(false);
            }
        };
        fetchOngoingChargingData();
    }, [reservationData]);

    //用來計充電歷時    //用來計充電歷時    //用來計充電歷時    //用來計充電歷時    //用來計充電歷時
    const [timeSince, setTimeSince] = useState<string>('');
    useEffect(() => {
        const updateTimeSince = () => {
            if (reservationData && reservationData.actual_start_time) {
                setTimeSince(timeSinceBooking(reservationData.actual_start_time) || '計算中...');
            } else {
                setTimeSince('計算中...');
            }
        };
        updateTimeSince();
        // Update every minute
        const intervalId = setInterval(updateTimeSince, 60000);
        // Cleanup interval on component unmount
        return () => clearInterval(intervalId);
    }, [reservationData]);

    function timeSinceBooking(timeString) {
        if (timeString) {
            const startTime = new Date(timeString);
            const now = new Date();
            const diffInMilliseconds = now - startTime;
            const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60));

            if (diffInMinutes < 1) {
                return '< 1 minute';
            } else {
                return `${diffInMinutes} minute${diffInMinutes !== 1 ? 's' : ''}`;
            }
        }
    }
    //用來計充電歷時    //用來計充電歷時    //用來計充電歷時    //用來計充電歷時    //用來計充電歷時

    const displayKW = (currentA: number, voltageA: number) => {
        if (currentA && voltageA) {
            return (currentA * voltageA) / 1000;
        } else return 30.0;
    };

    if (isLoading) {
        return (
            <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator size="large" />
                <Text>Loading...</Text>
            </SafeAreaView>
        );
    }

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }} edges={['top', 'left', 'right']}>
            <ScrollView className="flex-1">
                <View className="flex-1 mx-[5%] space-y-4">
                    <View className="items-center">
                        <View className="mt-6 mb-4">
                            <Text className="text-lg ">現正充電中:</Text>
                        </View>
                        <Text className="text-4xl font-light">
                            {reservationData.car.car_brand.name} {reservationData.car.car_type.name}
                        </Text>
                    </View>

                    <View className="items-center">
                        <Text className="text-lg" style={styles.grayColor}>
                            充電中
                        </Text>
                        <View className="flex-row space-x-4 p-4 pr-8 items-center justify-center ml-10">
                            <RippleEffectBatteryIcon />
                            <Text
                                style={{
                                    color: '#02677D',
                                    fontSize: 60,
                                    fontWeight: 300
                                }}
                            >
                                {/* {onGoingChargingData ? `${onGoingChargingData.Soc} %` : 'Loading'} */}
                                {`${reservationData.Soc}%`}
                                <LoadingDots />
                            </Text>
                        </View>
                        {/* 尚餘時間未知點計住 comments左先
                        <Text className="text-lg mb-6" style={styles.grayColor}>
                            尚餘時間 ~48 mins
                        </Text> */}
                        <View className="mb-[-10] items-center justify-center ">
                            <Image
                                source={require('../../assets/car.png')}
                                style={{ width: 430, height: 200 }}
                                resizeMode="contain"
                            />
                        </View>
                    </View>

                    <View
                        className="h-[220px] min-h-[20px] border-slate-300 rounded-2xl flex-column"
                        style={{ borderWidth: 1 }}
                    >
                        {/* Top */}
                        <View className="h-[65%] flex-row justify-evenly items-center">
                            <View className="flex-1 flex-column items-center space-y-2">
                                <LightingLogoSvg />
                                <Text style={styles.grayColor} className="text-base">
                                    充電功率
                                </Text>
                                {isLoading ? (
                                    <ActivityIndicator />
                                ) : (
                                    <Text style={styles.greenColor} className="font-bold text-base">
                                        {displayKW(onGoingChargingData.CurrentA, onGoingChargingData.VoltageA)}kW
                                    </Text>
                                )}
                            </View>
                            <View className="flex-1 flex-column items-center space-y-2">
                                <BatteryIconSvg />
                                <Text style={styles.grayColor} className="text-base">
                                    實際功率
                                </Text>
                                {isLoading ? (
                                    <ActivityIndicator />
                                ) : (
                                    <Text style={styles.greenColor} className="font-bold text-base">
                                        {displayKW(onGoingChargingData.CurrentA, onGoingChargingData.VoltageA)}kW
                                    </Text>
                                )}
                            </View>
                            <View className="flex-1 flex-column items-center space-y-2">
                                <TemperatureIconSvg />
                                <Text style={styles.grayColor} className="text-base">
                                    溫度
                                </Text>
                                {isLoading ? (
                                    <ActivityIndicator />
                                ) : (
                                    <Text style={styles.greenColor} className="font-bold text-base">
                                        36°c
                                    </Text>
                                )}
                            </View>
                        </View>
                        <View className="mx-[5%]">
                            <View className="h-[1px] w-[100%] bg-[#CCCCCC]" />
                        </View>
                        {/* bottom container */}
                        <View className="h-[35%] mx-[5%] justify-center ">
                            <Text style={styles.grayColor} className="text-base">
                                充電歷時 ~{timeSince}
                            </Text>
                        </View>
                    </View>

                    {/* <View
                        className="min-h-[20px] border-slate-300 rounded-2xl justify-center p-4"
                        style={{ borderWidth: 1 }}
                    >
                        <View className="flex-row items-center justify-between ">
                            <View>
                                <Text className="text-lg">預計充電費用</Text>

                                <Text className="text-base" style={styles.grayColor}>
                                    按每度電結算: 50 kWh
                                </Text>
                            </View>
                            <Text className="text-3xl">HK$ 175</Text>
                        </View>
                    </View> */}

                    <View className="border-slate-300 rounded-2xl justify-center p-4" style={{ borderWidth: 1 }}>
                        <Text className="text-lg pb-1 ">其他資訊</Text>
                        <View className="flex-row">
                            <View className="flex-1 flex-column">
                                <Text className="text-base" style={styles.grayColor}>
                                    開始時間
                                </Text>
                                <Text className="text-base">
                                    {convertToHKTime(reservationData.actual_start_time).hkTime.slice(0, 5)}
                                </Text>
                            </View>
                            <View className="flex-1 flex-column">
                                <Text className="text-base" style={styles.grayColor}>
                                    充電座
                                </Text>
                                {/* <Text className="text-base">{reservationData.connector.ConnectorID}</Text> */}
                                <Text className="text-base">A104</Text>
                            </View>
                        </View>
                    </View>

                    <View>
                        <NormalButton
                            onPress={() => {
                                router.push('chargingPage');
                            }}
                            title={
                                <Text className="text-xl text-white" style={{ fontWeight: 900 }}>
                                    完成充電
                                </Text>
                            }
                        />
                    </View>
                    <View>
                        <NormalButton
                            onPress={() => {
                                router.push('/chargingPenaltyPage');
                            }}
                            title={
                                <Text className="text-xl text-white" style={{ fontWeight: 900 }}>
                                    觀看閒置/罰款狀態頁面
                                </Text>
                            }
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default ChargingPageComponent;
const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    },
    text: {
        fontWeight: 300,
        color: '#000000'
    }
});