crazycharge-app/component/chargingPage/chargingFinishPageFromTabComponent.tsx

import { View, Text, ScrollView, Image, StyleSheet, Pressable } from 'react-native';
import React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Path, Rect } from 'react-native-svg';
import NormalButton from '../global/normal_button';
import SlideInImage from '../global/slideInImage';
import { router } from 'expo-router';

const BatteryLogoSvg = () => (
    <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
        <Rect width="40" height="40" rx="20" fill="#02677D" />
        <Path
            d="M25.1202 32.2255V28.7039H22.5962L26.274 22.8746V26.3962H28.798L25.1202 32.2255ZM14.8798 31.925C14.5597 31.925 14.2914 31.8168 14.0748 31.6002C13.8583 31.3837 13.75 31.1153 13.75 30.7952V11.4804C13.75 11.1603 13.8583 10.8919 14.0748 10.6754C14.2914 10.4589 14.5597 10.3506 14.8798 10.3506H17.1394V8.17511H21.7547V10.3506H24.0168C24.3373 10.3506 24.6053 10.4589 24.8208 10.6754C25.0364 10.8919 25.1441 11.1603 25.1441 11.4804V20.1703C24.8108 20.1863 24.4899 20.2228 24.1814 20.2796C23.8729 20.3365 23.5689 20.4179 23.2692 20.5236V12.2135H15.6249V27.514H18.2452C18.2452 28.3441 18.3758 29.1342 18.637 29.8842C18.8982 30.6342 19.2708 31.3145 19.7547 31.925H14.8798Z"
            fill="#FAFAFA"
        />
    </Svg>
);
const DownArrowSvg = () => (
    <Svg width="12" height="7" viewBox="0 0 12 7" fill="none">
        <Path
            d="M6.00002 6.70762L0.346191 1.05383L1.40002 0L6.00002 4.6L10.6 0L11.6538 1.05383L6.00002 6.70762Z"
            fill="#222222"
        />
    </Svg>
);
const UpArrowSvg = () => (
    <Svg width="12" height="7" viewBox="0 0 12 7" fill="none">
        <Path
            d="M6.00002 0.29238L11.6538 5.94617L10.6 7L6.00002 2.4L1.40002 7L0.346191 5.94617L6.00002 0.29238Z"
            fill="#222222"
        />
    </Svg>
);
const TimeClockLogoSvg = () => (
    <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
        <Rect width="40" height="40" rx="20" fill="#02677D" />
        <Path
            d="M23.6559 24.7652L24.7652 23.6559L20.7894 19.6799V14.7368H19.2105V20.3198L23.6559 24.7652ZM20.0018 30C18.6187 30 17.3186 29.7375 16.1016 29.2126C14.8846 28.6877 13.826 27.9753 12.9258 27.0755C12.0255 26.1757 11.3129 25.1175 10.7877 23.9011C10.2626 22.6846 10 21.3849 10 20.0018C10 18.6187 10.2625 17.3186 10.7874 16.1016C11.3123 14.8846 12.0247 13.826 12.9245 12.9258C13.8243 12.0256 14.8825 11.3129 16.0989 10.7877C17.3154 10.2626 18.6151 10 19.9982 10C21.3813 10 22.6814 10.2625 23.8984 10.7874C25.1154 11.3123 26.174 12.0247 27.0742 12.9245C27.9744 13.8243 28.6871 14.8825 29.2123 16.0989C29.7374 17.3154 30 18.6151 30 19.9982C30 21.3813 29.7375 22.6814 29.2126 23.8984C28.6877 25.1154 27.9753 26.174 27.0755 27.0742C26.1757 27.9744 25.1175 28.6871 23.9011 29.2123C22.6846 29.7374 21.3849 30 20.0018 30ZM20 28.4211C22.3333 28.4211 24.3202 27.6009 25.9605 25.9605C27.6009 24.3202 28.4211 22.3333 28.4211 20C28.4211 17.6667 27.6009 15.6798 25.9605 14.0395C24.3202 12.3991 22.3333 11.5789 20 11.5789C17.6667 11.5789 15.6798 12.3991 14.0395 14.0395C12.3991 15.6798 11.5789 17.6667 11.5789 20C11.5789 22.3333 12.3991 24.3202 14.0395 25.9605C15.6798 27.6009 17.6667 28.4211 20 28.4211Z"
            fill="#FAFAFA"
        />
    </Svg>
);

const TickLogoSvg = () => (
    <Svg width="40" height="40" viewBox="0 0 40 40" fill="none">
        <Rect width="40" height="40" rx="20" fill="#02677D" />
        <Path
            d="M15.9168 30L6.41684 20.5L8.79184 18.125L15.9168 25.25L31.2085 9.95837L33.5835 12.3334L15.9168 30Z"
            fill="#FAFAFA"
        />
    </Svg>
);

const BatteryIconSvg = () => (
    <Svg width="20" height="31" viewBox="0 0 20 31" fill="none">
        <Path
            d="M15.1282 30.8013V26.4103H12.5641L16.5384 19.1987V23.5898H19.1026L15.1282 30.8013ZM1.98716 30C1.60574 30 1.28603 29.871 1.02803 29.613C0.770005 29.355 0.640991 29.0353 0.640991 28.6539V3.81408C0.640991 3.4327 0.770005 3.11299 1.02803 2.85496C1.28603 2.59696 1.60574 2.46796 1.98716 2.46796H4.67949V0H10.3205V2.46796H13.0194C13.4018 2.46796 13.7206 2.59696 13.9759 2.85496C14.2313 3.11299 14.359 3.4327 14.359 3.81408V15.3205C11.9872 15.6261 9.99466 16.68 8.38141 18.4824C6.76816 20.2847 5.96153 22.4252 5.96153 24.9038C5.96153 25.8398 6.0876 26.7383 6.33974 27.5994C6.59188 28.4605 6.96046 29.2607 7.44549 30H1.98716Z"
            fill="#02677D"
        />
    </Svg>
);

const LightingLogoSvg = () => (
    <Svg width="21" height="30" viewBox="0 0 21 30" fill="none">
        <Path
            d="M5.75631 29.8077L7.42297 18.3333H0.3396L12.8076 0.352539H13.5768L11.9422 13.3333H20.2756L6.52552 29.8077H5.75631Z"
            fill="#02677D"
        />
    </Svg>
);

const ChargingFinishPageFromTabComponent = () => {
    //1 make this component receives a parameter, and receive format order id .
    //2 make a use effect to fetch data using the format id.
    //3 change below details 


    const [isMoreInfoButtonPressed, setIsMoreInfoButtonPressed] = React.useState<boolean>(false);

    function calculateDurationInMinutes(startTimeString: string, endTimeString: string): number {
        const startTime = new Date(startTimeString);
        const endTime = new Date(endTimeString);

        // Calculate the difference in milliseconds
        const durationMs = endTime.getTime() - startTime.getTime();

        // Convert milliseconds to minutes
        const durationMinutes = Math.round(durationMs / (1000 * 60));

        return durationMinutes;
    }

    const durationInMinutes = calculateDurationInMinutes(chargingData.actual_end_time, chargingData.actual_start_time);

    return (
        <SafeAreaView className="flex-1 bg-white">
            <ScrollView className="flex-1 mx-[5%]" showsVerticalScrollIndicator={false}>
                <View style={{ marginTop: 25, flex: 1 }}>
                    <View className="flex-row items-center">
                        <TickLogoSvg />
                        <Text className="text-3xl pl-2">完成充電</Text>
                    </View>
                    <View className="items-center pt-4 justify-center">
                        <SlideInImage source={require('../../assets/car.png')} />

                        <Text className="text-2xl font-light pb-4">
                            {chargingData.car.car_brand.name} {chargingData.car.car_type.name}
                        </Text>
                    </View>

                    <View style={{ borderWidth: 1 }} className="border-[#EEEEEE] rounded-2xl">
                        <View className="mx-[5%] flex-column p-4 ">
                            <View className="flex-row justify-evenly gap-6">
                                <View className="flex-row items-center space-x-4">
                                    <BatteryLogoSvg />
                                    <View className="flex-column ">
                                        <Text className="text-sm" style={styles.grayColor}>
                                            已充電
                                        </Text>
                                        <Text style={styles.greenColor} className="text-4xl font-light">
                                            {`${chargingData.Soc}%`}
                                        </Text>
                                    </View>
                                </View>
                                <View className="flex-row items-center space-x-4">
                                    <TimeClockLogoSvg />

                                    <View className="flex-column">
                                        {/* actualEnd_time - actual start time */}
                                        <Text className="text-sm" style={styles.grayColor}>
                                            充電歷時
                                        </Text>
                                        <View className="flex-row items-end">
                                            <Text style={styles.greenColor} className="text-4xl font-light">
                                                {/* 39 */}
                                                {durationInMinutes}
                                            </Text>
                                            <Text style={styles.greenColor} className="text-sm font-light">
                                                mins
                                            </Text>
                                        </View>
                                    </View>
                                </View>
                            </View>
                            <View className="h-0.5 w-full my-4 bg-[#EEEEEE]" />
                            {isMoreInfoButtonPressed ? (
                                <>
                                    <View className="h-[100px] flex-row items-center">
                                        <View className="flex-1 flex-column items-center space-y-2">
                                            <LightingLogoSvg />
                                            <Text style={styles.grayColor} className="text-base">
                                                充電功率
                                            </Text>
                                            <Text style={styles.greenColor} className="font-bold text-base">
                                                {chargingData.connector.Power / 1000}kW
                                            </Text>
                                        </View>
                                        <View className="flex-1 flex-column items-center space-y-2">
                                            <BatteryIconSvg />
                                            <Text style={styles.grayColor} className="text-base">
                                                實際功率
                                            </Text>
                                            <Text style={styles.greenColor} className="font-bold text-base">
                                                {/* 30.0kW */}
                                                {chargingData.connector.Power / 1000}kW
                                            </Text>
                                        </View>
                                    </View>
                                    <Pressable
                                        onPress={() => {
                                            setIsMoreInfoButtonPressed(!isMoreInfoButtonPressed);
                                        }}
                                        style={{ padding: 2 }}
                                    >
                                        <View className="flex-row pt-4 items-center justify-center">
                                            <Text className="text-sm">收起 </Text>
                                            <UpArrowSvg />
                                        </View>
                                    </Pressable>
                                </>
                            ) : (
                                <Pressable
                                    onPress={() => {
                                        setIsMoreInfoButtonPressed(!isMoreInfoButtonPressed);
                                    }}
                                    style={{ padding: 2 }}
                                >
                                    <View className="flex-row items-center justify-center">
                                        <Text className="text-sm">更多資訊 </Text>
                                        <DownArrowSvg />
                                    </View>
                                </Pressable>
                            )}
                        </View>
                    </View>

                    <View>
                        <Text className="text-xl py-4">收費概要</Text>
                        <View className="flex-row justify-between">
                            <Text className="text-base">充電費用</Text>
                            <Text className="text-base">HK$ {chargingData.total_fee}</Text>
                        </View>
                        <Text style={styles.grayColor} className="text-base">
                            {chargingData.total_power === null
                                ? '充滿停機'
                                : `按每度電結算: ${chargingData.total_power} kWh`}
                        </Text>
                        <View className="h-0.5 my-3 bg-[#f4f4f4]" />
                        {chargingData.withdraw_fee === 0 ? (
                            ''
                        ) : (
                            <View className="flex-row justify-between">
                                <Text className="text-base" style={styles.grayColor}>
                                    退還充電按金
                                </Text>
                                <Text className="text-base">HK$ ${chargingData.withdraw}</Text>
                            </View>
                        )}

                        <View className="h-0.5 my-3 bg-[#f4f4f4]" />
                        <View className="flex-row justify-between ">
                            <Text className="text-xl">總計</Text>
                            <Text className="text-xl">HK$ ${chargingData.total_fee - chargingData.withdraw_fee}</Text>
                        </View>
                        <View className="mt-4"></View>
                    </View>

                    <View className="w-full h-1 bg-[#DBE4E8]" />
                    <View className="space-y-4 my-4">
                        <Text className="text-xl ">付款資訊</Text>
                        <View>
                            <Text className="text-base" style={styles.grayColor}>
                                訂單編號
                            </Text>
                            <Text className="text-base">CXZ-16336958</Text>
                        </View>
                        <View>
                            <Text className="text-base" style={styles.grayColor}>
                                付款方式
                            </Text>
                            <Text className="text-base">預付銀包</Text>
                        </View>
                    </View>

                    <NormalButton
                        title={<Text style={{ color: '#fff', fontSize: 18 }}>返回主頁</Text>}
                        onPress={() => {
                            router.push('mainPage');
                        }}
                    />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default ChargingFinishPageFromTabComponent;

const styles = StyleSheet.create({
    grayColor: {
        color: '#888888'
    },
    greenColor: {
        color: '#02677D'
    }
});