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

import { useState } from 'react';
import { View, Text, StyleSheet, TouchableWithoutFeedback, Keyboard, Pressable } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import PaginationIndicator from '../../global/PaginationIndicator';
import { router } from 'expo-router';
import BindingPhoneNumberPage from './formPages/bindingPhoneNumberPage';
import BindingPhoneNumberPageStepTwo from './formPages/bindingPhoneNumberPageStepTwo';
import BindingFinishPage from './formPages/bindingFinishPage';

const BindingPhoneNumberForm = ({ bindingFormData, setBindingFormData }: any) => {
    const [screen, setScreen] = useState<number>(0);
    const FormTitle = ['舊用戶手機號碼綁定 (1/2)', '舊用戶手機號碼綁定 (2/2)'];
    // const goToPreviousPage = () => {
    //         router.back();
    // };

    const goToPreviousPage = () => {
        if (screen == 1) {
            setScreen((prevState) => prevState - 1);
        } else {
            router.replace('/(public)/login');
        }
    };

    const ScreenDisplay = () => {
        switch (screen) {
            case 0:
                return (
                    <BindingPhoneNumberPage
                        bindingFormData={bindingFormData}
                        setBindingFormData={setBindingFormData}
                        setScreen={setScreen}
                    />
                );
            case 1:
                return (
                    <BindingPhoneNumberPageStepTwo
                        bindingFormData={bindingFormData}
                        setBindingFormData={setBindingFormData}
                        setScreen={setScreen}
                    />
                );
            case 2:
                return <BindingFinishPage />;
            default:
                return <></>;
        }
    };
    return (
        <>
            <KeyboardAwareScrollView
                enableOnAndroid={true}
                resetScrollToCoords={{ x: 0, y: 0 }}
                style={{
                    height: '100%'
                }}
            >
                {screen !== 2 && (
                    <View style={styles.topContainer}>
                        <Text style={styles.text}>{FormTitle[screen]}</Text>
                        <View style={styles.breakline} />
                        <View className="w-full flex-row justify-between items-center">
                            <Pressable onPress={goToPreviousPage} className="flex-1">
                                <Text
                                    style={{
                                        color: '#888888',
                                        fontSize: 18,
                                        paddingLeft: 25
                                    }}
                                >{`<  上一步`}</Text>
                            </Pressable>
                            <PaginationIndicator totalPages={2} currentPage={0} />
                            <View className="flex-1" />
                        </View>
                    </View>
                )}
                <View style={styles.bottomContainer}>{ScreenDisplay()}</View>
            </KeyboardAwareScrollView>
        </>
    );
};

const styles = StyleSheet.create({
    topContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingBottom: '25%',
        paddingTop: '15%'
    },
    previouspageAndPaginationWrapper: {
        display: 'flex',
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 25
    },
    bottomContainer: { flex: 1 },
    breakline: {
        width: 24,
        height: 1,
        backgroundColor: '#000000',
        marginVertical: 17
    },
    text: { fontSize: 24, fontWeight: '300' }
});

export default BindingPhoneNumberForm;