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

interface CarModel {
    name: string;
    year: number;
    id: string;
}

import React, { useEffect, useState } from 'react';
import { View, Text, Image, Pressable, StyleSheet, ScrollView } from 'react-native';
import { FlashList } from '@shopify/flash-list';
import { router, useLocalSearchParams } from 'expo-router';
import { SafeAreaView } from 'react-native-safe-area-context';
import { PreviousPageBlackSvg } from '../../../../../component/global/SVG';
import useVehicleStore from '../../../../../providers/vehicle_store';
import { set } from 'date-fns';
interface CarType {
    id: number;
    name: string;
}
const SetVehiclesTwo = () => {
    const { brandId, brandName, carTypes } = useLocalSearchParams<{
        brandId: string;
        brandName: string;
        carTypes: string;
    }>();
    const [parsedCarTypes, setParsedCarTypes] = useState<CarType[]>([]);

    useEffect(() => {
        if (carTypes) {
            const parsed = JSON.parse(carTypes);
            setParsedCarTypes(parsed);
            console.log(parsed);
        }
    }, [carTypes]);

    const {
        vehicleBrand,
        vehicleModel,
        BrandID,
        ModelID,
        licensePlate,
        setVehicleBrand,
        setVehicleModel,
        setBrandID,
        setModelID,
        setLicensePlate
    } = useVehicleStore();
    const logoPath = `../../../../../assets/${vehicleBrand.toLowerCase()}.png`;
    const [carModels, setCarModels] = useState<CarModel[]>([]);

    const brandLogos = {
        audi: require('../../../../../assets/audi.png'),
        acura: require('../../../../../assets/acura.png'),
        bmw: require('../../../../../assets/bmw.png'),
        byd: require('../../../../../assets/byd.png'),
        chevrolet: require('../../../../../assets/chevrolet.png'),
        cadillac: require('../../../../../assets/cadillac.png'),
        ford: require('../../../../../assets/ford.png'),
        fiat: require('../../../../../assets/fiat.png'),
        genesis: require('../../../../../assets/genesis.png'),
        honda: require('../../../../../assets/honda.png'),
        hyundai: require('../../../../../assets/hyundai.png'),
        jaguar: require('../../../../../assets/jaguar.png'),
        kia: require('../../../../../assets/kia.png'),
        'mercedes-benz': require('../../../../../assets/benz.png'),
        mini: require('../../../../../assets/mini.png'),
        mazda: require('../../../../../assets/mazda.png'),
        nissan: require('../../../../../assets/nissan.png'),
        porsche: require('../../../../../assets/porsche.png'),
        subaru: require('../../../../../assets/subaru.png'),
        tesla: require('../../../../../assets/tesla.png'),
        toyota: require('../../../../../assets/toyota.png'),
        volkswagen: require('../../../../../assets/volkswagen.png'),
        volvo: require('../../../../../assets/volvo.png'),
        default: require('../../../../../assets/bmw.png') // Make sure to add a default logo
    };

    const getBrandLogo = (brand: string) => {
        const logoKey = brand.toLowerCase().replace(/\s+/g, '-');
        return brandLogos[logoKey] || brandLogos.default;
    };

    const renderModelItem = ({ item: model }: { item: CarModel }) => (
        <>
            <Pressable
                className="flex-1 items-center justify-center py-6"
                onPress={() => {
                    console.log(`Selected model: ${model.name}`);
                    console.log(`selected type id: ${model.id}`);
                    setVehicleModel(model.name);
                    setModelID(model.id);
                    router.push('addVehiclePage');
                }}
            >
                <Text style={styles.modelYear} className="pb-1">
                    {model.year}
                </Text>
                <Text style={styles.modelName}>{model.name}</Text>
            </Pressable>
            <View className="border-t mx-4 border-[#CCCCCC]" />
        </>
    );

    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 className="flex flex-row items-center space-x-8">
                        <Image source={getBrandLogo(vehicleBrand)} className="w-20 h-20 " resizeMode="contain" />
                        <Text className="text-4xl italic tracking-wider">{vehicleBrand}</Text>
                    </View>
                </View>
                <View className="flex-1">
                    <FlashList
                        data={parsedCarTypes}
                        renderItem={renderModelItem}
                        keyExtractor={(item) => item.name}
                        estimatedItemSize={30}
                        numColumns={1}
                    />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    modelItem: {
        flex: 1,
        height: 100,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F0F0F0',
        margin: 5,
        borderRadius: 10
    },
    modelName: {
        fontSize: 16,
        fontWeight: 'bold'
    },
    modelYear: {
        fontSize: 14,
        color: '#666'
    }
});

export default SetVehiclesTwo;