crazycharge-app/component/registrationMultiStepForm/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 CarInformation from './formPages/carInformation';
import PaginationIndicator from '../../global/PaginationIndicator';
import CreateWallet from './formPages/createWallet';
import FinishSignUp from './formPages/finishSignUp';
import LoginPage from './formPages/loginPage';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import ChooseCarBrand from './formPages/chooseCarPage/carBrand';
import ChooseCarSeries from './formPages/chooseCarPage/carSeries';
import ChooseCarModel from './formPages/chooseCarPage/carModel';
import ForgetPasswordForm from '../../forgetPasswordMultiStepForm/forgetPasswordForm';
import SetVehiclesOne from '../../../app/(auth)/(tabs)/(home)/(vehicle)/setVehiclesOne';
import SetVehiclesTwo from '../../../app/(auth)/(tabs)/(home)/(vehicle)/setVehiclesTwo';

import BindingMultiStepForm from '../../bindingMultiStepForm/bindingMultiStepForm';

type FormProps = {};
const Form: React.FC<FormProps> = ({}) => {
    const [screen, setScreen] = useState<number>(0);
    const FormTitle = ['', '註冊 - 電話驗證', '註冊 - 基本資料', '註冊 - 基本資料', '註冊 - 設立銀包'];

    const ScreenDisplay = () => {
        switch (screen) {
            case 0:
                return (
                    <LoginPage
                        goToNextPage={goToNextPage}
                        goToForgetPassWordPage={goToForgetPassWordPage}
                        goToBindingPhoneNumberPage={goToBindingPhoneNumberPage}
                    />
                );
            case 1:
                return <Verification setScreen={setScreen} />;
            case 2:
                return <BasicInformation goToNextPage={goToNextPage} />;
            // case 3:
            //     return <UberDriver goToNextPage={goToNextPage} />;
            // case 3:
            //     return <CarInformation goToNextPage={goToNextPage} goToChooseCarPage={goToChooseCarBrandPage} />;
            case 3:
                return <CreateWallet goToNextPage={goToNextPage} />;
            case 4:
                return <FinishSignUp />;
            case 6:
                return (
                    <ChooseCarBrand
                        goToCarInformation={goToCarInformation}
                        goToChooseCarSeriesPage={goToChooseCarSeriesPage}
                    />
                );
            case 7:
                return (
                    <ChooseCarSeries
                        goToChooseCarBrandPage={goToChooseCarBrandPage}
                        goToChooseCarModelPage={goToChooseCarModelPage}
                    />
                );

            case 8:
                return (
                    <ChooseCarModel
                        goToChooseCarSeriesPage={goToChooseCarSeriesPage}
                        goToCarInformation={goToCarInformation}
                    />
                );
            case 9:
                return <ForgetPasswordForm />;

            case 11:
                return <BindingMultiStepForm />;
            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;
            }
        });
    };
    const goToChooseCarBrandPage = () => {
        setScreen((prevState) => {
            return 6;
        });
    };

    const goToChooseCarSeriesPage = () => {
        setScreen((prevState) => {
            return 7;
        });
    };
    const goToChooseCarModelPage = () => {
        setScreen((prevState) => {
            return 8;
        });
    };

    const goToCarInformation = () => {
        setScreen((prevState) => {
            return 4;
        });
    };

    const goToForgetPassWordPage = () => {
        setScreen((prevState) => {
            return 9;
        });
    };

    const goToBindingPhoneNumberPage = () => {
        setScreen((prevState) => {
            return 11;
        });
    };
    return (
        <>
            <KeyboardAwareScrollView
                enableOnAndroid={true}
                // resetScrollToCoords={{ x: 0, y: 0 }}
            >
                {/* not showing title and pagination on the first and last page */}
                {screen == 0 ||
                    (screen < 4 && (
                        //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;