import { Text, View, StyleSheet } from "react-native";
import { StatusBar } from "expo-status-bar";
import Form from "./formComponent/form";
import { useEffect, useState } from "react";
import { SignUpFormData } from "../../types/signup";
import useSignUpStore from "../../providers/signup_form_store";

const MultiStepForm: React.FC = () => {
	const [formData, setFormData] = useState<SignUpFormData>({
		phone: "",
		phoneVerificationStatus: false,
		name: "",
		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;