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

const AddVehiclePageComponent = () => {
    const [isChecked, setChecked] = useState(false);
    const [isLoading, setIsLoading] = useState(false);

    const { height: deviceHeight, width: deviceWidth } = Dimensions.get('window');
    const {
        vehicleBrand,
        vehicleModel,
        BrandID,
        ModelID,
        licensePlate,
        setVehicleBrand,
        setVehicleModel,
        setBrandID,
        setModelID,
        setLicensePlate
    } = useVehicleStore();

    const handleSubmit = async () => {
        setIsLoading(true);
        try {
            const result = await chargeStationService.addCar(licensePlate, BrandID, ModelID, isChecked);
            if (result) {
                router.push({
                    pathname: 'addVehicleSuccessfulPage',
                    params: { vehicleBrand: vehicleBrand, vehicleModel: vehicleModel }
                });
            } else {
                Alert.alert('新增車輛失敗', '請再試一次');
            }
        } catch (error) {
            console.log(error, 'unexpected');
        } finally {
            setIsLoading(false);
        }
    };

    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
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 10
                    }}
                >
                    <Pressable style={styles.button} onPress={() => router.push('setVehiclesOne')}>
                        <TextInput
                            style={styles.fakeTextInput}
                            placeholder={vehicleBrand ? vehicleBrand : '車輛品牌'}
                            editable={false}
                            pointerEvents="none"
                        ></TextInput>
                        <TextInput
                            style={styles.fakeTextInput}
                            placeholder={vehicleModel ? vehicleModel : '車輛型號'}
                            editable={false}
                            pointerEvents="none"
                        ></TextInput>
                    </Pressable>
                    <TextInput
                        style={styles.fakeTextInput}
                        onChangeText={(e) => setLicensePlate(e.toUpperCase())}
                        placeholder="點擊輸入車輛牌照號碼"
                        autoCapitalize="characters"
                    ></TextInput>
                </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={() => {
                        handleSubmit();
                        setVehicleBrand('');
                        setVehicleModel('');
                        setBrandID('');
                        setModelID('');
                        setLicensePlate('');
                        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;