// component/chargingPage/paymentFinishPageComponent.tsx
import { View, Text, ScrollView, StyleSheet, Pressable } from 'react-native';
import React, { useEffect } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import NormalButton from '../global/normal_button';

import { router, useLocalSearchParams, useNavigation } from 'expo-router';
import {
    BatteryIconSvg,
    BatteryLogoSvg,
    DownArrowSvg,
    LightingLogoSvg,
    TemperatureIconSvg,
    TickLogoSvg,
    TimeClockLogoSvg,
    UpArrowSvg
} from '../global/SVG';
import useBookingStore from '../../providers/booking_store';
import userStore from '../../providers/user_store';
import { useTranslation } from '../../util/hooks/useTranslation';

const PaymentFinishPageComponent = () => {
    const { t } = useTranslation();
    const { bookTime, carID, date, chargingWatt, connectorID, price, stationID, user, paymentFee, carCapacitance } =
        useBookingStore();
    const navigation = useNavigation();

    useEffect(() => {
        navigation.setOptions({
            gestureEnabled: false
        });
    }, [navigation]);

    // const [isMoreInfoButtonPressed, setIsMoreInfoButtonPressed] =
    //     React.useState<boolean>(false);
    const params = useLocalSearchParams();
    const formatOrderId = params.formatOrderId;
    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">{t('payment_finish.success_title')}</Text>
                    </View>
                    <View>
                        <Text className="text-xl py-4">{t('payment_finish.fee_summary')}</Text>
                        <View className="flex-row justify-between">
                            <Text className="text-base">{t('payment_finish.charging_fee')}</Text>
                            <Text className="text-base">HK$ {paymentFee}</Text>
                        </View>
                        {chargingWatt === '' ? (
                            <Text style={styles.grayColor} className="text-base">
                                {t('payment_finish.estimated_full_charge')}
                            </Text>
                        ) : (
                            <Text style={styles.grayColor} className="text-base">
                                {t('payment_finish.settled_per_kwh')}{chargingWatt.split('~')[0]}
                            </Text>
                        )}

                        <View className="h-0.5 my-3 bg-[#f4f4f4]" />
                        <View className="flex-row justify-between ">
                            <Text className="text-xl">{t('payment_finish.total')}</Text>
                            <Text className="text-xl">HK$ {paymentFee}</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 ">{t('payment_finish.payment_info')}</Text>
                        <View>
                            <Text className="text-base" style={styles.grayColor}>
                                {t('payment_finish.order_number')}
                            </Text>
                            <Text className="text-base">{formatOrderId}</Text>
                        </View>
                        <View>
                            <Text className="text-base" style={styles.grayColor}>
                                {t('payment_finish.payment_method')}
                            </Text>
                            <Text className="text-base">{t('payment_finish.prepaid_wallet')}</Text>
                        </View>
                    </View>

                    <NormalButton
                        title={<Text style={{ color: '#fff', fontSize: 18 }}>{t('common.nextPage')}</Text>}
                        onPress={() => {
                            // router.replace('bookingSuccessPage');
                            router.replace({
                                pathname: 'bookingSuccessPage',
                                params: { formatOrderId: formatOrderId }
                            });
                        }}
                    />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default PaymentFinishPageComponent;

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