crazycharge-app/component/registrationMultiStepForm/formComponent/formPages/chooseCarPage/carSeries.tsx

import { useEffect, useState } from 'react';
import React from 'react';
import { View, Text, StyleSheet, Pressable, FlatList } from 'react-native';
import { FlashList } from '@shopify/flash-list';
import useSignUpStore from '../../../../../providers/signup_form_store';
import { ICarSeries } from '../../../../../types/car';

type CarBrandSeriesMap = {
    [brand: string]: ICarSeries[];
};

//hard-coded mock data
const vehicles: CarBrandSeriesMap = {
    'Brand A': [
        {
            imgUrl: 'logo1',
            name: 'Brand A - Series 1',
            id: 'Brand A - Series 1'
        },
        {
            imgUrl: 'logo2',
            name: 'Brand A - Series 2',
            id: 'Brand A - Series 2'
        },
        {
            imgUrl: 'logo3',
            name: 'Brand A - Series 3',
            id: 'Brand A - Series 3'
        },
        {
            imgUrl: 'logo4',
            name: 'Brand A - Series 4',
            id: 'Brand A - Series 4'
        }
    ],
    'Brand B': [
        {
            imgUrl: 'logo1',
            name: 'Brand B - Series 1',
            id: 'Brand B - Series 1'
        },
        {
            imgUrl: 'logo2',
            name: 'Brand B - Series 2',
            id: 'Brand B - Series 2'
        },
        {
            imgUrl: 'logo3',
            name: 'Brand B - Series 3',
            id: 'Brand B - Series 3'
        },
        {
            imgUrl: 'logo4',
            name: 'Brand B - Series 4',
            id: 'Brand B - Series 4'
        }
    ],
    'Brand C': [
        {
            imgUrl: 'logo1',
            name: 'Brand C - Series 1',
            id: 'Brand C - Series 1'
        },
        {
            imgUrl: 'logo2',
            name: 'Brand C - Series 2',
            id: 'Brand C - Series 2'
        },
        {
            imgUrl: 'logo3',
            name: 'Brand C - Series 3',
            id: 'Brand C - Series 3'
        },
        {
            imgUrl: 'logo4',
            name: 'Brand C - Series 4',
            id: 'Brand C - Series 4'
        }
    ]
};

type ChooseCarSeriesProps = {
    goToChooseCarBrandPage: () => void;
    goToChooseCarModelPage: () => void;
};

const ChooseCarSeries: React.FC<ChooseCarSeriesProps> = ({
    goToChooseCarBrandPage,
    goToChooseCarModelPage
}) => {
    const { signUpFormData, setSignUpFormData } = useSignUpStore();
    const handleSelectSeries = (brand: string) => {
        setSignUpFormData({
            ...signUpFormData,
            selectedCarSeries: brand
        });
        goToChooseCarModelPage();
    };

    return (
        <View style={styles.mainContainer}>
            <View style={styles.titleContainer}>
                <Text style={{ fontSize: 24, fontWeight: '300' }}>
                    選擇車系
                </Text>
            </View>
            <View style={styles.paginationContainer}>
                <Pressable onPress={goToChooseCarBrandPage}>
                    <Text style={{ color: '#888888' }}>{`<  上一步`}</Text>
                </Pressable>
            </View>
            <View style={styles.bottomContainer}>
                <FlashList
                    data={vehicles[signUpFormData.selectedCarBrand]}
                    estimatedItemSize={20}
                    renderItem={({ item }) => (
                        <Pressable
                            onPress={() => handleSelectSeries(item.name)}
                        >
                            <View style={styles.listContainer}>
                                <View style={styles.logoContainer}>
                                    <Text
                                        style={{
                                            fontSize: 24,
                                            fontWeight: '200'
                                        }}
                                    >
                                        {'logo'}
                                    </Text>
                                </View>
                                <View style={styles.itemContainer}>
                                    <Text style={styles.item}>{item.name}</Text>
                                </View>
                            </View>
                        </Pressable>
                    )}
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#FFFFFF'
    },
    titleContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },

    paginationContainer: {
        flex: 0.3,
        paddingLeft: '6%',

        paddingBottom: '5%'
    },
    bottomContainer: {
        flex: 7
    },
    listContainer: {
        flex: 0.5,
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 15
    },
    logoContainer: {
        flex: 2,
        alignItems: 'center'
    },
    itemContainer: {
        flex: 8
    },
    item: {
        paddingLeft: '6%',
        fontSize: 24,
        fontWeight: '200'
    }
});

export default ChooseCarSeries;