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 { ICarBrand } from '../../../../../types/car';
type ChooseCarBrandProps = {
    goToCarInformation: () => void;
    goToChooseCarSeriesPage: () => void;
};

//hard-coded mock data
const data: ICarBrand[] = [
    { imgUrl: 'logo1', name: 'Brand A', id: 'Brand A' },
    { imgUrl: 'logo2', name: 'Brand B', id: 'Brand B' },
    { imgUrl: 'logo3', name: 'Brand C', id: 'Brand C' }
];

const ChooseCarBrand: React.FC<ChooseCarBrandProps> = ({
    goToCarInformation,
    goToChooseCarSeriesPage
}) => {
    const { signUpFormData, setSignUpFormData } = useSignUpStore();
    const handleSelectBrand = (brand: string) => {
        setSignUpFormData({
            ...signUpFormData,
            selectedCarBrand: brand
        });
        goToChooseCarSeriesPage();
    };

    return (
        <View style={styles.mainContainer}>
            <View style={styles.titleContainer}>
                <Text style={{ fontSize: 24, fontWeight: '300' }}>
                    選擇品牌
                </Text>
            </View>
            <View style={styles.paginationContainer}>
                <Pressable onPress={goToCarInformation}>
                    <Text style={{ color: '#888888' }}>{`<  上一步`}</Text>
                </Pressable>
            </View>
            <View style={styles.bottomContainer}>
                <FlashList
                    data={data}
                    estimatedItemSize={20}
                    renderItem={({ item }) => (
                        <Pressable onPress={() => handleSelectBrand(item.name)}>
                            <View style={styles.listContainer}>
                                <View style={styles.logoContainer}>
                                    <Text
                                        style={{
                                            fontSize: 24,
                                            fontWeight: '200'
                                        }}
                                    >
                                        {item.imgUrl}
                                    </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,
        minHeight: 2
    },
    listContainer: {
        flex: 0.5,
        flexDirection: 'row',
        alignItems: 'center',
        // borderTopWidth: 1,
        paddingVertical: 15
    },
    logoContainer: {
        flex: 2,
        alignItems: 'center'
    },
    itemContainer: {
        flex: 8
    },
    item: {
        paddingLeft: '6%',
        fontSize: 24,
        fontWeight: '200'
    }
});

export default ChooseCarBrand;

// const styles = StyleSheet.create({
// 	topContainer: { flex: 1, alignItems: "center", justifyContent: "center", paddingBottom: "20%", paddingTop: "15%" },
// 	previouspageAndPaginationWrapper: {
// 		display: "flex",
// 		width: "100%",
// 		flexDirection: "row",
// 		justifyContent: "space-between",
// 		alignItems: "center",
// 		paddingHorizontal: 25,
// 	},

// 	bottomContainer: { flex: 2.5 },
// 	breakline: { width: 24, height: 1, backgroundColor: "#000000", marginVertical: 17 },
// 	text: { fontSize: 24, fontWeight: "300" },
// });
