crazycharge-app/component/registrationMultiStepForm/formComponent/formPages/carInformation.tsx

// import { View, Text, StyleSheet, Pressable, TextInput } from 'react-native';
// import NormalInput from '../../../global/normal_input';
// import NormalButton from '../../../global/normal_button';
// import { useEffect, useState } from 'react';
// import useSignUpStore from '../../../../providers/signup_form_store';
// import DropdownSelect from '../../../global/dropdown_select';
// import { chargeStationService } from '../../../../service/chargeStationService';
// import Checkbox from 'expo-checkbox';

// type CarInformationProps = {
//     goToNextPage: () => void;
//     goToChooseCarPage: () => void;
// };

// const CarInformation: React.FC<CarInformationProps> = ({
//     goToNextPage,
//     goToChooseCarPage
// }) => {
//     const { signUpFormData, setSignUpFormData } = useSignUpStore();
//     const [error, setError] = useState('');
//     const [isChecked, setChecked] = useState(false);
//     const [brandNameDropdownOptions, setBrandNameDropdownOptions] = useState(
//         []
//     );
//     const [brandData, setBrandData] = useState([]);
//     const [brandTypeDropdownOptions, setBrandTypeDropdownOptions] = useState([
//         {
//             label: '車輛型號',
//             value: '車輛型號'
//         }
//     ]);
//     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 (signUpFormData.selectedCarBrand) {
//             const selectedBrand = brandData.find(
//                 (brand) => brand.id === signUpFormData.selectedCarBrand
//             );

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

//     const handleNext = () => {
//         if (
//             signUpFormData.selectedCarBrand === '0000' ||
//             signUpFormData.selectedCarSeries === '0000' ||
//             signUpFormData.licensePlate === '0000'
//         ) {
//             setError('請確保所有資料都已填寫。');
//         } else {
//             setError('');
//             goToNextPage();
//         }
//     };

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

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

//                         <TextInput
//                             style={styles.fakeTextInput}
//                             onChangeText={(text) => {
//                                 setSignUpFormData({
//                                     licensePlate: text
//                                 });
//                                 // console.log(licensePlate);
//                             }}
//                             // value={signUpFormData.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> */}
//                     {/* <Pressable
//                         style={styles.button}
//                         onPress={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> */}
//                     <NormalButton
//                         title={<Text style={{ color: '#fff' }}>下一步</Text>}
//                         onPress={handleNext}
//                         extendedStyle={{}}
//                     />
//                     {error && <Text style={styles.errorMessage}>{error}</Text>}
//                     <NormalButton
//                         title={<Text style={{ color: '#888888' }}>略過</Text>}
//                         onPress={goToNextPage}
//                         extendedStyle={{ backgroundColor: 'transparent' }}
//                     />
//                 </View>
//             </View>
//         </>
//     );
// };

// const styles = StyleSheet.create({
//     container: {
//         flex: 1,
//         marginHorizontal: 20
//     },
//     button: { flex: 1, gap: 10, marginTop: 5 },
//     fakeTextInput: {
//         maxWidth: '100%',
//         fontSize: 16,
//         borderWidth: 1,
//         padding: 20,
//         borderRadius: 12,
//         borderColor: '#bbbbbb'
//     },
//     text: {
//         fontSize: 20,
//         paddingBottom: 10
//     },
//     errorMessage: {
//         fontSize: 14,
//         color: '#ff0033',
//         fontWeight: '400',
//         marginLeft: 10,
//         marginTop: 10
//     },
//     checkbox: {
//         margin: 8
//     }
// });
// export default CarInformation;
import { View, Text, StyleSheet, Pressable, TextInput } from 'react-native';
import NormalInput from '../../../global/normal_input';
import NormalButton from '../../../global/normal_button';
import { useEffect, useState } from 'react';
import useSignUpStore from '../../../../providers/signup_form_store';
import DropdownSelect from '../../../global/dropdown_select';
import { chargeStationService } from '../../../../service/chargeStationService';
import Checkbox from 'expo-checkbox';
import { router } from 'expo-router';
import useVehicleStore from '../../../../providers/vehicle_store';

type CarInformationProps = {
    goToNextPage: () => void;
    goToChooseCarPage: () => void;
};

const CarInformation: React.FC<CarInformationProps> = ({ goToNextPage, goToChooseCarPage }) => {
    const { signUpFormData, setSignUpFormData } = useSignUpStore();
    const [error, setError] = useState('');
    const [isChecked, setChecked] = useState(false);
    const [brandNameDropdownOptions, setBrandNameDropdownOptions] = useState([]);
    const [brandData, setBrandData] = useState([]);

    const [brandTypeDropdownOptions, setBrandTypeDropdownOptions] = useState([
        {
            label: '車輛型號',
            value: '車輛型號'
        }
    ]);

    const {
        vehicleBrand,
        vehicleModel,
        BrandID,
        ModelID,
        licensePlate,
        setVehicleBrand,
        setVehicleModel,
        setBrandID,
        setModelID,
        setLicensePlate
    } = useVehicleStore();

    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 (signUpFormData.selectedCarBrand) {
            const selectedBrand = brandData.find((brand) => brand.id === signUpFormData.selectedCarBrand);

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

    //HERE I need to get car information, and the final create wallet i need to get car information
    const handleNext = () => {
        if (
            BrandID === '' ||
            ModelID === '' ||
            signUpFormData.licensePlate === '0000' ||
            signUpFormData.licensePlate === ''
        ) {
            setError('請確保所有資料都已填寫。');
        } else {
            setError('');
            goToNextPage();
        }
    };

    return (
        <>
            <View style={styles.container}>
                <Text style={styles.text}>您的車輛</Text>
                <View
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 10
                    }}
                >
                    <View
                        style={{
                            display: 'flex',
                            flexDirection: 'column',
                            gap: 10
                        }}
                    >
                        <Pressable
                            style={styles.button}
                            onPress={() => router.push('(public)/registerChooseVehiclesOne')}
                        >
                            <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={(text) => {
                                setSignUpFormData({
                                    licensePlate: text.toUpperCase()
                                });
                                // console.log(licensePlate);
                            }}
                            // value={signUpFormData.licensePlate}
                            placeholder="車輛牌照號碼"
                            autoCapitalize="characters"
                            placeholderTextColor="#888"
                        />
                    </View>

                    <NormalButton
                        title={<Text style={{ color: '#fff' }}>下一步</Text>}
                        onPress={handleNext}
                        extendedStyle={{}}
                    />
                    {error && <Text style={styles.errorMessage}>{error}</Text>}
                    <NormalButton
                        title={<Text style={{ color: '#888888' }}>略過</Text>}
                        onPress={goToNextPage}
                        extendedStyle={{ backgroundColor: 'transparent' }}
                    />
                </View>
            </View>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginHorizontal: 20
    },
    button: { flex: 1, gap: 10, marginTop: 5 },
    fakeTextInput: {
        maxWidth: '100%',
        fontSize: 16,
        borderWidth: 1,
        padding: 20,
        borderRadius: 12,
        borderColor: '#bbbbbb'
    },
    text: {
        fontSize: 20,
        paddingBottom: 10
    },
    errorMessage: {
        fontSize: 14,
        color: '#ff0033',
        fontWeight: '400',
        marginLeft: 10,
        marginTop: 10
    },
    checkbox: {
        margin: 8
    }
});
export default CarInformation;