import { Text, View, StyleSheet } from 'react-native';
import { StatusBar } from 'expo-status-bar';

import { useEffect, useState } from 'react';
import { SignUpFormData } from '../../types/signup';
import useSignUpStore from '../../providers/signup_form_store';
import Form from '../registrationMultiStepForm/formComponent/form';

const MultiStepForm: React.FC = () => {
    const [formData, setFormData] = useState<SignUpFormData>({
        phone: '',
        phoneVerificationStatus: false,
        name: '',
        gender: '',
        password: '',
        email: '',
        birthDate: '',
        isUberDriver: undefined,
        vehicleType: '',
        vehicleModel: '',
        licensePlate: '',
        address: '',
        paymentMethod: ''
    });
    //logging to check if parent component can successfully receive user input in the multi-step form
    const { signUpFormData } = useSignUpStore();
    useEffect(() => {
        console.log('Current Zustand Store:', signUpFormData);
    }, [signUpFormData]);

    return (
        <View style={styles.container}>
            <Form formData={formData} setFormData={setFormData} />
            <StatusBar style="auto" />
        </View>
    );
};

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

export default MultiStepForm;