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

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

    return (
        <SafeAreaView
            className="flex-1 bg-white"
            edges={['top', 'right', 'left']}
        >
            <ScrollView
                showsVerticalScrollIndicator={false}
                className="flex-1 mx-[5%]"
            >
                <View style={{ marginTop: 25, flexDirection: 'column' }}>
                    <Pressable
                        className="self-start"
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/accountMainPage');
                            }
                        }}
                    >
                        <PreviousPageBlackSvg />
                    </Pressable>
                </View>

                <Text
                    style={{
                        fontSize: 30,
                        marginTop: 25,
                        marginBottom: 10
                    }}
                >
                    管理車輛
                </Text>
                <View className="items-center ">
                    <Image
                        source={require('../../assets/car.png')}
                        resizeMode="contain"
                        style={{
                            width: deviceWidth * 0.8,
                            height: deviceHeight * 0.25
                        }}
                    />
                </View>

                <View className="flex-row space-x-2 ">
                    <View
                        style={{
                            width: 4,
                            height: '100%',
                            backgroundColor: '#02677D'
                        }}
                    />
                    <View>
                        <Text className="text-2xl">TESLA Model 3</Text>
                        <Text className="text-lg text-[#888888]">CE1107</Text>
                    </View>
                </View>

                <NormalButton
                    title={
                        <Text
                            style={{
                                fontWeight: '500',
                                fontSize: 20,
                                color: '#fff'
                            }}
                        >
                            設置為預設車輛 <StarSvg />
                        </Text>
                    }
                    onPress={() => console.log('設置為預設車輛')}
                    extendedStyle={{ marginTop: 24 }}
                />
                <View className="w-full h-1 my-4 bg-[#DBE4E8]" />
                <View>
                    <Text className="text-xl pb-4">車輛資訊</Text>
                    <Text className="text-base text-[#888888]">加入日期</Text>
                    <Text className="text-base mb-3">2/24/2024</Text>
                    <Text className="text-base text-[#888888]">總充電量</Text>
                    <Text className="text-base mb-3">307kWh</Text>
                    <Text className="text-base text-[#888888]">上一次充電</Text>
                    <Text className="text-base mb-3">3/12/2024</Text>
                    <View className="my-4 pb-8">
                        <NormalButton
                            title={
                                <Text
                                    style={{
                                        color: 'white',
                                        fontSize: 20,
                                        fontWeight: '800'
                                    }}
                                >
                                    删除車輛
                                </Text>
                            }
                            onPress={() => console.log('删除車輛')}
                            extendedStyle={{
                                backgroundColor: '#D40000'
                            }}
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default ManageVehiclePageComponent;