crazycharge-app/component/chargingPage/chargingPenaltyComponent.tsx

import { View, Text, ScrollView, StyleSheet, Image } from 'react-native';
import React 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';

const IdlingGreyBox = () => {
    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">
                    待機中..
                </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">
                            剩餘待機時間:
                        </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">
                            請於下方確認完成充電以免進入罰款時間
                        </Text>
                    </View>
                </View>
            </View>
        </View>
    );
};

const PenaltyRedBox = () => {
    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">
                    罰款中
                </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}>
                            罰款時間歷時:
                        </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 className="w-[40%]">
                        <Text style={styles.warningLightText}>累積:</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}>
                            請於下方確認完成充電以解鎖
                        </Text>
                    </View>
                </View>
            </View>
        </>
    );
};

const ChargingPenaltyPageComponent = () => {
    const [isIdling, setIsIdling] = React.useState<boolean>(false);

    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}>
                            已完成充電
                        </Text>
                        <Text className="text-2xl">TESLA Model 3</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}
                                    >
                                        已充電
                                    </Text>
                                    <Text
                                        style={styles.greenColor}
                                        className="text-4xl font-light"
                                    >
                                        95%
                                    </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}
                                    >
                                        充電歷時
                                    </Text>
                                    <View className="flex-row items-end">
                                        <Text
                                            style={styles.greenColor}
                                            className="text-4xl font-light"
                                        >
                                            39
                                        </Text>
                                        <Text
                                            style={styles.greenColor}
                                            className="text-sm font-light"
                                        >
                                            mins
                                        </Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    </View>
                    {isIdling ? (
                        <View className=" flex-column py-3">
                            <IdlingGreyBox />
                        </View>
                    ) : (
                        <View className="flex-column py-3">
                            <PenaltyRedBox />
                        </View>
                    )}
                    <View>
                        <NormalButton
                            onPress={() => {
                                router.push('paymentSummaryPage');
                            }}
                            title={
                                <Text
                                    className="text-xl text-white "
                                    style={{ fontWeight: 900 }}
                                >
                                    完成充電
                                </Text>
                            }
                        />
                    </View>

                    <ExpectedFeeBox
                        extendedStyle={{ marginTop: 12, padding: 12 }}
                    />
                    <OtherInformationBox
                        extendedStyle={{ marginTop: 12, padding: 12 }}
                    />

                    <View className="mt-2">
                        <NormalButton
                            title={
                                <Text className="text-white text-3xl">
                                    SET IDLING
                                </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'
    }
});