import { router } from 'expo-router';
import { View, Text, ScrollView, Pressable, Image, Dimensions, StyleSheet, TextInput, FlatList } 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';
import useVehicleStore from '../../providers/vehicle_store';
import CarBrandSelector from './testingCar';

const SetVehiclePageComponent = () => {
    const [isChecked, setChecked] = useState(false);

    const { vehicleBrand, vehicleModel, licensePlate, setVehicleBrand, setVehicleModel, setLicensePlate } =
        useVehicleStore();

    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="flex-1">
                    <CarBrandSelector />
                </View>
            </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 SetVehiclePageComponent;