crazycharge-app/component/multiStepForm/formComponent/form.tsx

import { useState } from "react";
import { View, Text, StyleSheet, Pressable, TouchableWithoutFeedback, Keyboard } from "react-native";
import Verification from "./formPages/verification";
import BasicInformation from "./formPages/basicInformation";
import UberDriver from "./formPages/uberDriver";
import CarInformation from "./formPages/carInformation";
import PaginationIndicator from "../../global/PaginationIndicator";
import { SignUpFormData, SignUpFormDataKey } from "../../../types/signup";
import CreateWallet from "./formPages/createWallet";
import FinishSignUp from "./formPages/finishSignUp";
import LoginPage from "./formPages/loginPage";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

type FormProps = {
	formData: SignUpFormData;
	setFormData: React.Dispatch<React.SetStateAction<SignUpFormData>>;
};
const Form: React.FC<FormProps> = ({ formData, setFormData }) => {
	const [screen, setScreen] = useState<number>(0);
	const FormTitle = [
		"",
		"註冊 - 電話驗證",
		"註冊 - 基本資料",
		"註冊 - Uber Driver",
		"註冊 - 車輛資料",
		"註冊 - 設立銀包",
	];

	const handleFormDataChange = <K extends SignUpFormDataKey>(field: K, value: SignUpFormData[K]) => {
		setFormData((prevFormData) => ({
			...prevFormData,
			[field]: value,
		}));
	};

	const ScreenDisplay = () => {
		switch (screen) {
			case 0:
				return <LoginPage goToNextPage={goToNextPage} />;
			case 1:
				return (
					<Verification
						setScreen={setScreen}
						formData={formData}
						handleFormDataChange={handleFormDataChange}
					/>
				);
			case 2:
				return (
					<BasicInformation
						formData={formData}
						handleFormDataChange={handleFormDataChange}
						goToNextPage={goToNextPage}
					/>
				);
			case 3:
				return (
					<UberDriver
						formData={formData}
						handleFormDataChange={handleFormDataChange}
						goToNextPage={goToNextPage}
					/>
				);
			case 4:
				return (
					<CarInformation
						formData={formData}
						handleFormDataChange={handleFormDataChange}
						goToNextPage={goToNextPage}
					/>
				);
			case 5:
				return (
					<CreateWallet
						formData={formData}
						handleFormDataChange={handleFormDataChange}
						goToNextPage={goToNextPage}
					/>
				);
			case 6:
				return <FinishSignUp />;
			default:
				return <></>;
		}
	};

	const goToPreviousPage = () => {
		setScreen((prevState) => {
			if (prevState > 0) {
				return prevState - 1;
			} else {
				return prevState;
			}
		});
	};

	const goToNextPage = () => {
		setScreen((prevState) => {
			if (prevState < 6) {
				return prevState + 1;
			} else {
				return prevState;
			}
		});
	};

	return (
		<>
			<KeyboardAwareScrollView enableOnAndroid={true} resetScrollToCoords={{ x: 0, y: 0 }}>
				{/* not showing title and pagination on the first and last page */}
				{screen == 0 ||
					(screen < 6 && (
						//dismiss keyboard when user click outside of the input field to improve user experience
						<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
							<View style={styles.topContainer}>
								<Text style={styles.text}>{FormTitle[screen]}</Text>
								<View style={styles.breakline} />
								<View style={styles.previouspageAndPaginationWrapper}>
									<Pressable onPress={goToPreviousPage}>
										<Text style={{ color: "#888888" }}>{`<  上一步`}</Text>
									</Pressable>
									<PaginationIndicator totalPages={FormTitle.length} currentPage={screen} />
									<Pressable disabled={true} onPress={goToNextPage}>
										<Text style={{ color: "#888888", opacity: 0 }}>{`下一步  >`}</Text>
									</Pressable>
								</View>
							</View>
						</TouchableWithoutFeedback>
					))}

				<View style={styles.bottomContainer}>{ScreenDisplay()}</View>
			</KeyboardAwareScrollView>
		</>
	);
};

const styles = StyleSheet.create({
	topContainer: { flex: 1, alignItems: "center", justifyContent: "center", paddingBottom: "20%", paddingTop: "15%" },
	previouspageAndPaginationWrapper: {
		display: "flex",
		width: "100%",
		flexDirection: "row",
		justifyContent: "space-between",
		alignItems: "center",
		paddingHorizontal: 25,
	},

	bottomContainer: { flex: 2.5 },
	breakline: { width: 24, height: 1, backgroundColor: "#000000", marginVertical: 17 },
	text: { fontSize: 24, fontWeight: "300" },
});

export default Form;