import { Text, View, StyleSheet } from "react-native";
import { StatusBar } from "expo-status-bar";
import Form from "./formComponent/form";
import { useEffect, useState } from "react";
import { FormData } from "../type";

const MultiStepForm: React.FC = () => {
	const [formData, setFormData] = useState<FormData>({
		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
	useEffect(() => {
		console.log(formData);
	}, [formData]);

	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;