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

const UberUploadPageComponent = () => {
    return (
        <SafeAreaView
            className="flex-1 bg-white"
            edges={['top', 'right', 'left']}
        >
            <ScrollView
                style={{ flex: 1 }}
                className="mx-[5%]"
                showsVerticalScrollIndicator={false}
            >
                <View style={{ marginTop: 25 }}>
                    <Pressable
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/accountMainPage');
                            }
                        }}
                    >
                        <PreviousPageBlackSvg />
                    </Pressable>
                    <Text style={{ fontSize: 45, marginVertical: 25 }}>
                        上傳證明
                    </Text>

                    <View className="space-y-2">
                        <Text style={{ fontSize: 22 }}>
                            請上傳Uber司機的證明圖片
                        </Text>
                        <Text style={{ fontSize: 18 }}>• 司機名稱</Text>
                        <Text style={{ fontSize: 18 }}>• 車牌</Text>
                        <Text style={{ fontSize: 18 }}>• 車輛品牌及型號</Text>
                    </View>
                    <View className="mt-5 ">
                        <Text style={{ fontSize: 22, marginBottom: 9 }}>
                            上傳範例
                        </Text>
                        <View className="flex-row w-full justify-between">
                            <Image
                                source={require('../../assets/uberUploadSample1.png')}
                                resizeMode="contain"
                                className="flex-1 h-auto"
                                style={{ aspectRatio: 1 }}
                            />
                            <Image
                                source={require('../../assets/uberUploadSample2.png')}
                                resizeMode="contain"
                                className="flex-1 h-auto"
                                style={{ aspectRatio: 1 }}
                            />
                        </View>
                        <Pressable onPress={() => console.log('a')}>
                            <View
                                style={{ borderWidth: 1 }}
                                className="border-[#EEEEEE] rounded-2xl items-center justify-center  p-4 "
                            >
                                <Text
                                    style={{ fontSize: 48 }}
                                    className="text-[#02677d] text-center"
                                >
                                    +
                                </Text>
                                <Text className="text-xl text-[#02677d] mb-6 text-center ">
                                    上傳圖片
                                </Text>
                            </View>
                        </Pressable>
                        <NormalButton
                            title={
                                <Text className="text-xl text-white">提交</Text>
                            }
                            onPress={() =>
                                router.push('uberUploadCompletePage')
                            }
                        />
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default UberUploadPageComponent;