crazycharge-app/component/chargingPage/chargingPenaltyComponent.tsx

// component/chargingPage/chargingPenaltyComponent.tsx
import { View, Text, ScrollView, StyleSheet, Image, ActivityIndicator } from 'react-native';
import React, { useEffect, useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import NormalButton from '../global/normal_button';
import ExpectedFeeBox from '../global/expectedFeeBox';
import OtherInformationBox from '../global/otherInformationBox';
import { BatteryLogoSvg, TimeClockLogoSvg, WarningTriangleLogoSvg } from '../global/SVG';
import { router } from 'expo-router';
import { useTranslation } from '../../util/hooks/useTranslation';

const IdlingGreyBox = ({ t }: { t: Function }) => {
    return (
        <View className="flex-1 ">
            <View className="p-4 bg-[#5a5c7c] w-full rounded-t-xl flex-row items-center ">
                <WarningTriangleLogoSvg />
                <Text className="text-white font-black text-xl pl-4">{t('charging_penalty.idling')}</Text>
            </View>

            <View className="bg-[#555776]  rounded-b-xl p-6 space-y-1">
                <View className="flex-row items-center">
                    <View className="w-[40%] ">
                        <Text className="text-base text-white">{t('charging_penalty.remaining_idling_time')}</Text>
                    </View>
                    <View className="w-[60%]">
                        <Text style={styles.warningBoldText}>01:55</Text>
                    </View>
                </View>

                <View className="flex-row items-center ">
                    <View>
                        <Text className="text-sm text-white">{t('charging_penalty.confirm_charging')}</Text>
                    </View>
                </View>
            </View>
        </View>
    );
};

const ChargingPenaltyPageComponent = ({ data }) => {
    const { t } = useTranslation();
    const [isIdling, setIsIdling] = React.useState<boolean>(false);
    const reservationData = Array.isArray(data) ? data[0] : data;
    const [loading, setLoading] = useState(false);

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

    function timeSinceBooking(timeString: any) {
        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 m';
            } else {
                return `${diffInMinutes} m${diffInMinutes !== 1 ? 's' : ''}`;
            }
        }
    }
    //用來計充電歷時    //用來計充電歷時    //用來計充電歷時    //用來計充電歷時    //用來計充電歷時
    const PenaltyRedBox = () => {
        const penalty_time = reservationData.actual_end_time;
        return (
            <>
                <View className="bg-[#bb2d12] flex-1 p-4 rounded-t-xl flex-row items-center px-[5%]">
                    <WarningTriangleLogoSvg />
                    <Text className="text-white font-black text-xl pl-4">{t('charging_penalty.in_penalty')}</Text>
                </View>
                <View className="bg-[#b12a11] flex-column  rounded-b-xl p-6">
                    <View className="flex-1 flex-row items-center pb-2">
                        <View className="w-[40%]">
                            <Text style={styles.warningLightText}>{t('charging_penalty.penalty_duration')}:</Text>
                        </View>
                        <View className="w-[60%]">
                            <Text style={styles.warningBoldText}>{penaltyTime}</Text>
                        </View>
                    </View>
                    <View className="flex-1 flex-row items-center pb-2">
                        <View className="w-[40%]">
                            <Text style={styles.warningLightText}>{t('charging_penalty.accumulated')}:</Text>
                        </View>
                        <View className="w-[60%]">
                            <Text style={styles.warningBoldText}>01:55</Text>
                        </View>
                    </View>
                    <View className="flex-1  flex-row items-center pb-2">
                        <View>
                            <Text style={styles.warningLightText}>{t('charging_penalty.unlock_charger')}</Text>
                        </View>
                    </View>
                </View>
            </>
        );
    };

    //用來計算penalty
    const [penaltyTime, setPenaltyTime] = useState<string>('');
    useEffect(() => {
        const updatePenaltyTime = () => {
            if (reservationData.actual_end_time) {
                setPenaltyTime(calculatePenaltyTime(reservationData.actual_end_time) || t('common.calculating'));
            } else {
                setPenaltyTime(t('charging_penalty.not_finished'));
            }
        };

        updatePenaltyTime();
        // Update every 30 seconds
        const intervalId = setInterval(updatePenaltyTime, 30000);
        // Cleanup interval on component unmount
        return () => clearInterval(intervalId);
    }, [reservationData.actual_end_time]);

    function calculatePenaltyTime(endTimeString: any) {
        if (endTimeString) {
            const endTime = new Date(endTimeString);
            const graceEndTime = new Date(endTime.getTime() + 15 * 60000); // Add 15 minutes
            const now = new Date();
            const diffInMilliseconds = now - graceEndTime;
            const diffInMinutes = Math.floor(diffInMilliseconds / (1000 * 60));

            if (diffInMinutes < 0) {
                return '0 m'; // No penalty yet
            } else if (diffInMinutes === 0) {
                return '< 1 m';
            } else {
                return `${diffInMinutes} m ${diffInMinutes !== 1 ? 's' : ''}`;
            }
        }
    }

    if (loading) {
        return (
            <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator size="large" />
                <Text>{t('common.loading')}</Text>
            </SafeAreaView>
        );
    }
    return (
        <SafeAreaView className="flex-1 bg-white" edges={['top', 'left', 'right']}>
            <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
                <View className="mx-[5%]">
                    <View className="my-4">
                        <Text className="text-xl" style={styles.greenColor}>
                            {t('charging_penalty.charging_completed')}
                        </Text>
                        <Text className="text-2xl">
                            {reservationData.car.car_brand.name} {reservationData.car.car_type.name}
                        </Text>
                    </View>
                    <View className="flex-row items-center ">
                        <View className="w-[50%] items-center justify-center">
                            <Image
                                source={require('../../assets/car.png')}
                                resizeMode="contain"
                                style={{ height: 127, width: 220 }}
                            />
                        </View>
                        <View className="w-[50%] flex-column items-center ">
                            <View className="flex-row items-center space-x-4">
                                <View>
                                    <BatteryLogoSvg />
                                </View>
                                <View className="flex-column">
                                    <Text className="text-sm" style={styles.grayColor}>
                                        {t('charging_penalty.charged')}
                                    </Text>
                                    <Text style={styles.greenColor} className="text-3xl font-light">
                                        {reservationData.Soc}%
                                    </Text>
                                </View>
                            </View>
                            <View className="flex-row items-center space-x-4">
                                <View>
                                    <TimeClockLogoSvg />
                                </View>
                                <View className="flex-column">
                                    <Text className="text-sm" style={styles.grayColor}>
                                        {t('charging_penalty.charging_duration')}
                                    </Text>
                                    <View className="flex-row items-end">
                                        <Text style={styles.greenColor} className="text-2xl font-light">
                                            {timeSince}
                                        </Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>
                    {isIdling ? (
                        <View className=" flex-column py-3">
                            <IdlingGreyBox t={t} />
                        </View>
                    ) : (
                        <View className="flex-column py-3">
                            <PenaltyRedBox />
                        </View>
                    )}
                    <View>
                        <NormalButton
                            onPress={() => {
                                router.push('chargingPage');
                            }}
                            title={
                                <Text className="text-xl text-white " style={{ fontWeight: 900 }}>
                                    {t('charging_penalty.finish_charging')}
                                </Text>
                            }
                        />
                    </View>

                    <ExpectedFeeBox extendedStyle={{ marginTop: 12, padding: 12 }} price={reservationData.total_fee} />
                    <OtherInformationBox
                        extendedStyle={{ marginTop: 12, padding: 12 }}
                        actual_start_time={reservationData.actual_start_time}
                    />

                    <View className="mt-2">
                        <NormalButton
                            title={<Text className="text-white text-xl font-semibold">{t('charging_penalty.view_idling_status')}</Text>}
                            onPress={() => setIsIdling((prevState) => !prevState)}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default ChargingPenaltyPageComponent;
const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    },
    text: {
        fontWeight: '300',
        color: '#000000'
    },
    warningLightText: {
        color: 'white',
        fontSize: 15,
        fontWeight: '400'
    },
    warningBoldText: {
        color: 'white',
        fontSize: 20,
        fontWeight: '700'
    }
});