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

const MultiStepForm: React.FC = () => {
    const { signUpFormData } = useSignUpStore();
    // logging to check if parent component can successfully receive user input in the multi-step form
    useEffect(() => {
        console.log('Current Zustand Store:', signUpFormData);
    }, [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;