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

interface AlphabetSection {
    letter: string;
    brands: CarBrand[];
}
const carBrands: AlphabetSection[] = [
    {
        letter: 'A',
        brands: [
            { name: 'Audi', logo: require('../../../../../assets/audi.png') },
            { name: 'Acura', logo: require('../../../../../assets/acura.png') }
        ]
    },
    {
        letter: 'B',
        brands: [
            { name: 'BMW', logo: require('../../../../../assets/bmw.png') },
            { name: 'BYD', logo: require('../../../../../assets/byd.png') }
        ]
    },
    {
        letter: 'C',
        brands: [
            { name: 'Chevrolet', logo: require('../../../../../assets/chevrolet.png') },
            { name: 'Cadillac', logo: require('../../../../../assets/cadillac.png') }
        ]
    },
    {
        letter: 'F',
        brands: [
            { name: 'Ford', logo: require('../../../../../assets/ford.png') },
            { name: 'Fiat', logo: require('../../../../../assets/fiat.png') }
        ]
    },
    {
        letter: 'G',
        brands: [{ name: 'Genesis', logo: require('../../../../../assets/genesis.png') }]
    },
    {
        letter: 'H',
        brands: [
            { name: 'Honda', logo: require('../../../../../assets/honda.png') },
            { name: 'Hyundai', logo: require('../../../../../assets/hyundai.png') }
        ]
    },
    {
        letter: 'J',
        brands: [{ name: 'Jaguar', logo: require('../../../../../assets/jaguar.png') }]
    },
    {
        letter: 'K',
        brands: [{ name: 'Kia', logo: require('../../../../../assets/kia.png') }]
    },
    {
        letter: 'M',
        brands: [
            { name: 'Mercedes-Benz', logo: require('../../../../../assets/benz.png') },
            { name: 'Mini', logo: require('../../../../../assets/mini.png') },
            { name: 'Mazda', logo: require('../../../../../assets/mazda.png') }
        ]
    },
    {
        letter: 'N',
        brands: [{ name: 'Nissan', logo: require('../../../../../assets/nissan.png') }]
    },
    {
        letter: 'P',
        brands: [{ name: 'Porsche', logo: require('../../../../../assets/porsche.png') }]
    },
    {
        letter: 'S',
        brands: [{ name: 'Subaru', logo: require('../../../../../assets/subaru.png') }]
    },
    {
        letter: 'T',
        brands: [
            { name: 'Tesla', logo: require('../../../../../assets/tesla.png') },
            { name: 'Toyota', logo: require('../../../../../assets/toyota.png') }
        ]
    },
    {
        letter: 'V',
        brands: [
            { name: 'Volkswagen', logo: require('../../../../../assets/volkswagen.png') },
            { name: 'Volvo', logo: require('../../../../../assets/volvo.png') }
        ]
    }
];
import React, { useEffect, useState } from 'react';
import { View, Text, Image, Pressable, StyleSheet, ScrollView } 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 [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);
            }
        };
        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
            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>
                <View className="flex-1">
                    <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;