import {
    View,
    Text,
    ScrollView,
    Image,
    Dimensions,
    Pressable
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import NormalButton from '../global/normal_button';
import { PreviousPageBlackSvg, TickLogoSvg } from '../global/SVG';
import { router, useLocalSearchParams } from 'expo-router';
import { useEffect, useState } from 'react';
import { chargeStationService } from '../../service/chargeStationService';

const AddVehicleSuccessfulPageComponent = () => {
    const { height: deviceHeight, width: deviceWidth } =
        Dimensions.get('window');

    const params = useLocalSearchParams();
    const selectedTypeID = params.selectedTypeID;
    const [vehicleName, setVehicleName] = useState('');
    console.log(selectedTypeID);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const result = await chargeStationService.fetchCarBrand();
                console.log(result.data);
                const carType = result.data
                    .flatMap((brand) => brand.car_types)
                    .find((type) => type.id === selectedTypeID);
                console.log(carType.name);
                setVehicleName(carType.name);
            } catch (error) {
                console.log(error);
            }
        };
        fetchData();
    }, []);

    return (
        <SafeAreaView className="flex-1 bg-white">
            <ScrollView
                className="flex-1 mx-[5%]"
                showsVerticalScrollIndicator={false}
            >
                <View style={{ marginTop: 25, flex: 1 }}>
                    <Pressable
                        className="self-start"
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/accountMainPage');
                            }
                        }}
                    >
                        <PreviousPageBlackSvg />
                    </Pressable>
                    <View className="flex-row items-center mt-6">
                        <TickLogoSvg />
                        <Text className="text-3xl pl-2">新增完成</Text>
                    </View>
                    <View className="items-center pt-4 justify-center">
                        <View className="items-center ">
                            <Image
                                source={require('../../assets/car.png')}
                                resizeMode="contain"
                                style={{
                                    width: deviceWidth * 0.8,
                                    height: deviceHeight * 0.25
                                }}
                            />
                        </View>

                        <Text className="text-3xl font-light pb-4 text-center">
                            {vehicleName}
                        </Text>
                        <Text className="text-lg font-light pb-4">
                            已加入我的車輛裡
                        </Text>
                    </View>

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

export default AddVehicleSuccessfulPageComponent;
function useRoute() {
    throw new Error('Function not implemented.');
}