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 { useNavigation } from '@react-navigation/native';
import { set } from 'date-fns';
import useVehicleStore from '../../providers/vehicle_store';
import { PreviousPageBlackSvg } from '../../component/global/SVG';
interface CarType {
    id: number;
    name: string;
}
const RegisterChooseVehiclesTwo = () => {
    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);
        }
    }, [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 navigation = useNavigation();

    const renderModelItem = ({ item: model }: { item: CarModel }) => (
        <>
            <Pressable
                className="flex-1 items-center justify-center py-6"
                onPress={() => {
                    setVehicleModel(model.name);
                    setModelID(model.id);
                    navigation.pop(2);
                }}
            >
                <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}
                        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 RegisterChooseVehiclesTwo;