crazycharge-app/app/(auth)/(tabs)/(home)/(vehicle)/setVehiclesOne.tsx

import React, { useEffect, useState } from 'react';
import { View, Text, Image, Pressable, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
import { FlashList } from '@shopify/flash-list';
import { router } from 'expo-router';
import { SafeAreaView } from 'react-native-safe-area-context';
import useVehicleStore from '../../../../../providers/vehicle_store';
import { chargeStationService } from '../../../../../service/chargeStationService';
import { PreviousPageBlackSvg } from '../../../../../component/global/SVG';

interface AlphabetSection {
    letter: string;
    brands: CarBrand[];
}

interface CarBrand {
    id: number;
    name: string;
    img_url: string;
    car_types: any[];
}

const brandLogos = {
    audi: require('../../../../../assets/audi.png'),
    benz: require('../../../../../assets/benz.png'),
    bmw: require('../../../../../assets/bmw.png'),
    byd: require('../../../../../assets/byd.png'),
    lexus: require('../../../../../assets/lexus.png'),
    mg: require('../../../../../assets/mg.png'),
    porsche: require('../../../../../assets/porsche.png'),
    tesla: require('../../../../../assets/tesla.png'),
    toyota: require('../../../../../assets/toyota.png'),
    xiaomi: require('../../../../../assets/xiaomi.png')
};

const SetVehiclesOne = () => {
    const [loading, setLoading] = useState(true);
    const [processedCarData, setProcessedCarData] = useState<CarBrand[]>([]);
    const { vehicleBrand, vehicleModel, BrandID, ModelID, setVehicleBrand, setBrandID } = useVehicleStore();

    useEffect(() => {
        const fetchCarBrand = async () => {
            try {
                const response = await chargeStationService.fetchCarBrand();
                if (response) {
                    setProcessedCarData(response.data);
                    console.log(
                        'All brand names:',
                        response.data.map((brand) => brand.name)
                    );
                }
            } catch (error) {
                console.log(error);
            } finally {
                setLoading(false);
            }
        };
        fetchCarBrand();
    }, []);

    useEffect(() => {
        console.log('Zustand VehicleBrand', vehicleBrand);
        console.log('Zustand BrandID', BrandID);
        console.log('Zustand VehicleModel', vehicleModel);
        console.log('Zustand ModelID', ModelID);
    }, [processedCarData]);

    const renderBrandItem = ({ item: brand }: { item: CarBrand }) => (
        <Pressable
            key={brand.id}
            style={styles.brandItem}
            onPress={() => {
                setVehicleBrand(brand.name);
                setBrandID(brand.id);

                router.push({
                    pathname: 'setVehiclesTwo',
                    params: {
                        brandId: brand.id.toString(),
                        brandName: brand.name,
                        carTypes: JSON.stringify(brand.car_types)
                    }
                });
            }}
        >
            <Image source={brandLogos[brand.name.toLowerCase()]} style={styles.logo} resizeMode="contain" />
            <Text style={styles.brandName}>{brand.name}</Text>
        </Pressable>
    );

    const renderAlphabetSection = ({ item: section }: { item: AlphabetSection }) => (
        <View>
            <View style={styles.letterHeader} className="h-9">
                <Text style={styles.letterText}>{section.letter}</Text>
            </View>
            <View style={styles.brandRow}>{section.brands.map((brand) => renderBrandItem({ item: brand }))}</View>
        </View>
    );

    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>

                {loading ? (
                    <View className="flex h-full items-center justify-center">
                        <ActivityIndicator />
                    </View>
                ) : (
                    <View className="flex-1 min-h-[80vh]">
                        <FlashList
                            estimatedItemSize={100}
                            data={processedCarData
                                .sort((a, b) => a.name.localeCompare(b.name))
                                .reduce((acc, brand) => {
                                    const letter = brand.name[0].toUpperCase();
                                    const existingSection = acc.find((section) => section.letter === letter);
                                    if (existingSection) {
                                        existingSection.brands.push(brand);
                                    } else {
                                        acc.push({ letter, brands: [brand] });
                                    }
                                    return acc;
                                }, [] as AlphabetSection[])}
                            renderItem={renderAlphabetSection}
                            keyExtractor={(item) => item.letter}
                        />
                    </View>
                )}
            </ScrollView>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    letterHeader: {
        backgroundColor: '#E3F2F8',
        padding: 10,
        marginVertical: 10
    },
    letterText: {
        color: '#02677D',
        fontSize: 14,
        fontWeight: 'bold'
    },
    brandRow: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    brandItem: {
        width: '33.33%',
        alignItems: 'center',
        padding: 10
    },
    logo: {
        width: 80,
        height: 80
    },
    brandName: {
        marginTop: 5,
        textAlign: 'center'
    }
});

export default SetVehiclesOne;

// interface AlphabetSection {
//     letter: string;
//     brands: CarBrand[];
// }

// import React, { useEffect, useState } from 'react';
// import { View, Text, Image, Pressable, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';

// import { FlashList } from '@shopify/flash-list';
// import { router } from 'expo-router';
// import useVehicleStore from '../../../../../providers/vehicle_store';
// import { PreviousPageBlackSvg } from '../../../../../component/global/SVG';
// import { SafeAreaView } from 'react-native-safe-area-context';
// import { chargeStationService } from '../../../../../service/chargeStationService';

// const SetVehiclesOne = () => {
//     const [loading, setLoading] = useState(true);
//     const [carData, setCarData] = useState();
//     const [extractedCarNameAndImgUrl, setExtractedCarNameAndImgUrl] = useState('');
//     const [processedCarData, setProcessedCarData] = useState([]);
//     const {
//         vehicleBrand,
//         vehicleModel,
//         BrandID,
//         ModelID,
//         licensePlate,
//         setVehicleBrand,
//         setVehicleModel,
//         setBrandID,
//         setModelID,
//         setLicensePlate
//     } = useVehicleStore();

//     //this uses getCarBrand to create an array of object with 2 keys: name and img_url
//     useEffect(() => {
//         const fetchCarBrand = async () => {
//             try {
//                 const response = await chargeStationService.fetchCarBrand();
//                 if (response) {
//                     const processedData = await Promise.all(
//                         response.data.map(async (car) => ({
//                             ...car,
//                             logo: await chargeStationService.getProcessedCarImageUrl(car.img_url)
//                         }))
//                     );
//                     setProcessedCarData(processedData);
//                 }
//             } catch (error) {
//                 console.log(error);
//             } finally {
//                 setLoading(false);
//             }
//         };
//         fetchCarBrand();
//     }, []);

//     useEffect(() => {
//         console.log('Zustand VehicleBrand', vehicleBrand);
//         console.log('Zustand BrandID', BrandID);
//         console.log('Zustand VehicleModel', vehicleModel);
//         console.log('Zustand ModelID', ModelID);
//     }, [processedCarData]);

//     const renderBrandItem = ({ item: brand }: { item }) => (
//         <Pressable
//             key={brand.id}
//             style={styles.brandItem}
//             onPress={() => {
//                 setVehicleBrand(brand.name);
//                 setBrandID(brand.id);

//                 router.push({
//                     pathname: 'setVehiclesTwo',
//                     params: {
//                         brandId: brand.id.toString(),
//                         brandName: brand.name,
//                         carTypes: JSON.stringify(brand.car_types)
//                     }
//                 });
//             }}
//         >
//             <Image source={{ uri: brand.logo }} style={styles.logo} resizeMode="contain" />
//             <Text style={styles.brandName}>{brand.name}</Text>
//         </Pressable>
//     );

//     const renderAlphabetSection = ({ item: section }: { item: AlphabetSection }) => (
//         <View>
//             <View style={styles.letterHeader} className="h-9">
//                 <Text style={styles.letterText}>{section.letter}</Text>
//             </View>
//             <View style={styles.brandRow}>{section.brands.map((brand) => renderBrandItem({ item: brand }))}</View>
//         </View>
//     );

//     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>
//                 {loading ? (
//                     <View className="flex h-full items-center justify-center">
//                         <ActivityIndicator />
//                     </View>
//                 ) : (
//                     <View className="flex-1 min-h-[80vh]">
//                         <FlashList
//                             estimatedItemSize={100}
//                             data={processedCarData
//                                 .sort((a, b) => a.name.localeCompare(b.name))
//                                 .reduce((acc, brand) => {
//                                     const letter = brand.name[0].toUpperCase();
//                                     const existingSection = acc.find((section) => section.letter === letter);
//                                     if (existingSection) {
//                                         existingSection.brands.push(brand);
//                                     } else {
//                                         acc.push({ letter, brands: [brand] });
//                                     }
//                                     return acc;
//                                 }, [] as AlphabetSection[])}
//                             renderItem={renderAlphabetSection}
//                             keyExtractor={(item) => item.letter}
//                         />
//                     </View>
//                 )}
//                 {/* <View className="flex-1 min-h-[80vh]">
//                     <FlashList
//                         estimatedItemSize={100}
//                         data={processedCarData.reduce((acc, brand) => {
//                             const letter = brand.name[0].toUpperCase();
//                             const existingSection = acc.find((section) => section.letter === letter);
//                             if (existingSection) {
//                                 existingSection.brands.push(brand);
//                             } else {
//                                 acc.push({ letter, brands: [brand] });
//                             }
//                             return acc;
//                         }, [] as AlphabetSection[])}
//                         renderItem={renderAlphabetSection}
//                         keyExtractor={(item) => item.letter}
//                     />
//                 </View> */}
//             </ScrollView>
//         </SafeAreaView>
//     );
// };

// const styles = StyleSheet.create({
//     letterHeader: {
//         backgroundColor: '#E3F2F8',
//         padding: 10,
//         marginVertical: 10
//     },
//     letterText: {
//         color: '#02677D',
//         fontSize: 14,
//         fontWeight: 'bold'
//     },
//     brandRow: {
//         flexDirection: 'row',
//         flexWrap: 'wrap'
//     },
//     brandItem: {
//         width: '33.33%',
//         alignItems: 'center',
//         padding: 10
//     },
//     logo: {
//         width: 80,
//         height: 80
//     },
//     brandName: {
//         marginTop: 5,
//         textAlign: 'center'
//     }
// });

// export default SetVehiclesOne;