crazycharge-app/component/registrationMultiStepForm/formComponent/formPages/verification.tsx

import { View, Text, StyleSheet, TextInput, Pressable } from 'react-native';
import { useState } from 'react';
import PhoneInput from '../../../global/phone_input';
import NumberInput from '../../../global/number_input';
import NormalButton from '../../../global/normal_button';
import useSignUpStore from '../../../../providers/signup_form_store';
import NormalInput from '../../../global/normal_input';
import { authenticationService } from '../../../../service/authService';

type VerificationProps = {
    setScreen: React.Dispatch<React.SetStateAction<number>>;
};

const Verification: React.FC<VerificationProps> = ({ setScreen }) => {
    const { signUpFormData, setSignUpFormData } = useSignUpStore();
    const [error, setError] = useState('');
    const [otp, setOtp] = useState('');
    const [canSendOtp, setCanSendOtp] = useState(true);
    const [lockEmailInput, setLockEmailInput] = useState(false);

    const handleVerification = async () => {
        if (signUpFormData.email === '' || otp === '') {
            setError('請確保所有資料都已填寫。');
        } else {
            setError('');
            authenticationService.verifySignUpOtp(signUpFormData.email, otp, setScreen, setError);
        }
    };

    const handleSubmitOtp = () => {
        if (signUpFormData.email) {
            if (canSendOtp) {
                setCanSendOtp(false);
                setLockEmailInput(true);
                authenticationService.sendOtpToSignUpEmail(signUpFormData.email);
                setTimeout(() => {
                    setCanSendOtp(true);
                    setLockEmailInput(false);
                }, 60000);
                setError('');
            } else {
                setError('請等待一分鐘後再重新發送。');
            }
        } else {
            setError('請確保所有資料都已填寫。');
        }
    };

    const handleChangePhoneNumber = () => {
        setLockEmailInput(false);
    };

    const otpButtonText = lockEmailInput ? (
        <Text style={{ color: '#fff' }}>重新發送</Text>
    ) : (
        <Text style={{ color: '#fff' }}>發送</Text>
    );

    return (
        <>
            <View style={styles.container}>
                <Text style={styles.text}>請驗證您的電子郵件</Text>

                <NormalInput
                    placeholder="請填寫您的電子郵件"
                    onChangeText={(email) =>
                        setSignUpFormData({
                            ...signUpFormData,
                            email: email
                        })
                    }
                    editable={!lockEmailInput}
                    extendedStyle={{ opacity: !lockEmailInput ? 1 : 0.5 }}
                    autoCapitalize="none"
                />

                <View
                    style={{
                        display: 'flex',
                        flexDirection: 'row',
                        paddingVertical: 10,
                        gap: 10
                    }}
                >
                    <NumberInput placeholder="OTP驗證碼" onChangeText={setOtp} extendedStyle={{ flex: 1 }} />
                    <NormalButton title={otpButtonText} onPress={handleSubmitOtp} extendedStyle={{ flex: 1 / 2 }} />
                </View>
                <NormalButton
                    title={<Text style={{ color: '#fff' }}>驗證</Text>}
                    onPress={() => {
                        handleVerification();
                    }}
                    extendedStyle={{}}
                />
                {error && <Text style={styles.errorMessage}>{error}</Text>}

                <Pressable onPress={handleChangePhoneNumber}>
                    <Text style={[styles.footer, { opacity: lockEmailInput ? 1 : 0 }]}>修改電子郵件</Text>
                </Pressable>
            </View>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginHorizontal: 20
    },
    text: {
        fontSize: 20,
        paddingBottom: 10
    },
    errorMessage: {
        fontSize: 16,
        color: '#ff0033',
        fontWeight: '400',

        paddingVertical: 10
    },
    footer: { color: '#02677D', fontSize: 16, paddingVertical: 10 }
});
export default Verification;