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

const AddVehiclePageComponent = () => {
    const [isChecked, setChecked] = useState(false);
    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 }}>
                    <Pressable
                        className="self-start"
                        onPress={() => {
                            if (router.canGoBack()) {
                                router.back();
                            } else {
                                router.replace('/accountMainPage');
                            }
                        }}
                    >
                        <PreviousPageBlackSvg />
                    </Pressable>
                    <Text
                        style={{
                            fontSize: 30,
                            marginTop: 25,
                            marginBottom: 10
                        }}
                    >
                        新增車輛
                    </Text>
                </View>

                <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-xl mb-4">新增車輛</Text>
                <View
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 10
                    }}
                >
                    <Pressable
                        style={styles.button}
                        onPress={() => console.log('goToChooseCarPage')}
                    >
                        <TextInput
                            style={styles.fakeTextInput}
                            placeholder="車輛類型"
                            editable={false}
                            pointerEvents="none"
                        ></TextInput>
                        <TextInput
                            style={styles.fakeTextInput}
                            placeholder="車輛型號"
                            editable={false}
                            pointerEvents="none"
                        ></TextInput>
                        <TextInput
                            style={styles.fakeTextInput}
                            placeholder="車輛牌照號碼"
                            editable={false}
                            pointerEvents="none"
                        ></TextInput>
                    </Pressable>
                </View>
                <View className="flex-row items-center">
                    <Text className="mt-4 mb-4 text-lg">設置為預設車輛</Text>
                    <Checkbox
                        style={styles.checkbox}
                        value={isChecked}
                        onValueChange={setChecked}
                        color={isChecked ? '#025c72' : undefined}
                    />
                </View>
                <NormalButton
                    title={
                        <Text
                            style={{
                                fontWeight: '700',
                                fontSize: 20,
                                color: '#fff'
                            }}
                        >
                            新增
                        </Text>
                    }
                    onPress={() => router.push('addVehicleSuccessfulPage')}
                />
                <Text> </Text>
            </ScrollView>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    button: { flex: 1, gap: 10, marginTop: 5 },
    fakeTextInput: {
        maxWidth: '100%',
        fontSize: 16,
        borderWidth: 1,
        padding: 20,
        borderRadius: 12,
        borderColor: '#bbbbbb'
    },
    checkbox: {
        margin: 8
    }
});
export default AddVehiclePageComponent;