import { View, StyleSheet, ScrollView } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';
import useSignUpStore from '../../providers/signup_form_store';
import Form from '../registrationMultiStepForm/formComponent/form';
import { SafeAreaView } from 'react-native-safe-area-context';
import useVehicleStore from '../../providers/vehicle_store';

const MultiStepForm: React.FC = () => {
    const { signUpFormData } = useSignUpStore();
    const {
        vehicleBrand,
        vehicleModel,
        BrandID,
        ModelID,
        licensePlate,
        setVehicleBrand,
        setVehicleModel,
        setBrandID,
        setModelID,
        setLicensePlate
    } = useVehicleStore();

    // logging to check if parent component can successfully receive user input in the multi-step form
    useEffect(() => {
        console.log('Current Zustand Store:', signUpFormData);
        console.log(
            'VehicleStore',
            vehicleBrand,
            vehicleModel,
            'BrandID',
            BrandID,
            'ModelID',
            ModelID,
            'licensePlate',
            licensePlate
        );
    }, [signUpFormData]);

    return (
        <SafeAreaView className="flex-1 bg-white" edges={['top', 'left', 'right']}>
            <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
                <View style={styles.container}>
                    <Form />
                    <StatusBar style="auto" />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    }
});

export default MultiStepForm;