crazycharge-app/component/chooseCar/chooseCarPageComponent.tsx

import { router } from 'expo-router';
import {
    View,
    Text,
    ScrollView,
    Pressable,
    Image,
    Dimensions,
    StyleSheet,
    TextInput,
    Alert,
    ActivityIndicator
} 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 DropdownSelect from '../global/dropdown_select';
import { chargeStationService } from '../../service/chargeStationService';

const chooseCarPageComponent = () => {
    const [isChecked, setChecked] = useState(false);
    const { height: deviceHeight, width: deviceWidth } =
        Dimensions.get('window');
    const [brandNameDropdownOptions, setBrandNameDropdownOptions] = useState(
        []
    );
    const [isLoading, setIsLoading] = useState(false);
    const [licensePlate, setLicensePlate] = useState('');
    const [selectedBrandID, setSelectedBrandID] = useState('');
    const [selectedTypeID, setSelectedTypeID] = useState('');
    const [caName, setCarName] = useState('');
    // const [carImg, setCarImg] = useState('');
    const [brandData, setBrandData] = useState([]);
    const [brandTypeDropdownOptions, setBrandTypeDropdownOptions] = useState([
        {
            label: '車輛型號',
            value: '車輛型號'
        }
    ]);

    const handleSubmit = async () => {
        setIsLoading(true);
        try {
            const result = await chargeStationService.addCar(
                licensePlate,
                selectedBrandID,
                selectedTypeID,
                isChecked
            );
            if (result) {
                router.push({
                    pathname: 'addVehicleSuccessfulPage',
                    params: { selectedTypeID: selectedTypeID }
                });
            } else {
                Alert.alert('failed to add car');
            }
        } catch (error) {
            console.log(error, 'unexpected');
        } finally {
            setIsLoading(false);
        }
    };

    useEffect(() => {
        const fetchData = async () => {
            try {
                const result = await chargeStationService.fetchCarBrand();
                setBrandData(result.data);
                const brandInfo = result.data.map((item) => ({
                    name: item.name,
                    id: item.id,
                    img_url: item.img_url
                }));

                // console.log(JSON.stringify(brandInfo, null, 2));
                const brandName = brandInfo.map((item) => item.name);
                console.log(brandName);
                const brandNameDropdownOptions = brandInfo.map((item) => ({
                    label: item.name,
                    value: item.id
                }));
                setBrandNameDropdownOptions(brandNameDropdownOptions);
            } catch (error) {
                console.log(error);
            }
        };
        fetchData();
    }, []);

    useEffect(() => {
        if (selectedBrandID) {
            const selectedBrand = brandData.find(
                (brand) => brand.id === selectedBrandID
            );
            

            if (selectedBrand && selectedBrand.car_types) {
                const typeOptions = selectedBrand.car_types.map((carType) => ({
                    label: carType.name,
                    value: carType.id
                }));
                setBrandTypeDropdownOptions(typeOptions);
            } else {
                setBrandTypeDropdownOptions([]);
            }
        } else {
            setBrandTypeDropdownOptions([]);
        }
    }, [selectedBrandID, brandData]);

    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: 20
                        }}
                    >
                        新增車輛
                    </Text>
                </View>

                <View
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 10
                    }}
                >
                    <DropdownSelect
                        dropdownOptions={brandNameDropdownOptions}
                        placeholder={'車輛品牌'}
                        onSelect={(ID) => {
                            setSelectedBrandID(ID);
                            console.log(ID);
                        }}
                        extendedStyle={{
                            borderWidth: 1,
                            padding: 20,
                            borderRadius: 12,
                            borderColor: '#bbbbbb'
                        }}
                    />

                    <DropdownSelect
                        dropdownOptions={brandTypeDropdownOptions}
                        placeholder={'車輛品牌'}
                        onSelect={(carTypeID) => setSelectedTypeID(carTypeID)}
                        extendedStyle={{
                            borderWidth: 1,
                            padding: 20,
                            borderRadius: 12,
                            borderColor: '#bbbbbb'
                        }}
                    />

                    <TextInput
                        style={styles.fakeTextInput}
                        onChangeText={(text) => {
                            setLicensePlate(text);
                            // console.log(licensePlate);
                        }}
                        value={licensePlate}
                        placeholder="車輛牌照號碼"
                        placeholderTextColor="#888"
                    />
                </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'
                            }}
                        >
                            {isLoading ? <ActivityIndicator /> : '新增'}
                        </Text>
                    }
                    onPress={() => {
                        handleSubmit();
                    }}
                    disabled={isLoading}
                />
                <Text> </Text>
            </ScrollView>
        </SafeAreaView>
    );
};
const styles = StyleSheet.create({
    button: { flex: 1, gap: 10, marginTop: 5 },
    fakeTextInput: {
        fontSize: 16,
        borderWidth: 1,
        padding: 24,
        borderRadius: 12,
        borderColor: '#bbbbbb',
        color: '#888'
    },
    checkbox: {
        margin: 8
    }
});
export default chooseCarPageComponent;