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';

type ChooseCarModelProps = {
    goToChooseCarSeriesPage: () => void;
    goToCarInformation: () => void;
};

//hard-coded mock data
const fakeData = [
    { name: 'vehicle 1' },
    { name: 'vehicle 2' },
    { name: 'vehicle 3' },
    { name: 'vehicle 4' }
];

const ChooseCarModel: React.FC<ChooseCarModelProps> = ({
    goToChooseCarSeriesPage,
    goToCarInformation
}) => {
    const { signUpFormData, setSignUpFormData } = useSignUpStore();

    const handleSelectModel = (model: string) => {
        setSignUpFormData({
            ...signUpFormData,
            selectedCarModel: model
        });
        goToCarInformation();
    };

    return (
        <View style={styles.mainContainer}>
            <View style={styles.titleContainer}>
                <Text style={{ fontSize: 24, fontWeight: '300' }}>
                    選擇車系
                </Text>
            </View>
            <View style={styles.paginationContainer}>
                <Pressable onPress={goToChooseCarSeriesPage}>
                    <Text style={{ color: '#888888' }}>{`<  上一步`}</Text>
                </Pressable>
            </View>
            <View style={styles.bottomContainer}>
                <FlashList
                    data={fakeData}
                    renderItem={({ item }) => (
                        <Pressable onPress={() => handleSelectModel(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 ChooseCarModel;