crazycharge-app/component/bindingMultiStepForm/formComponent/formPages/bindingPhoneNumberPageStepTwo.tsx

import { View, Text, StyleSheet, Pressable, Alert } from 'react-native';
import { useEffect, useState } from 'react';
import { forgetPasswordFormData, HandleForgetPasswordFormDataChange } from '../../../../types/signup';
import NumberInput from '../../../global/number_input';
import NormalButton from '../../../global/normal_button';
import NormalInput from '../../../global/normal_input';
import { authenticationService } from '../../../../service/authService';
import PhoneInput from '../../../global/phone_input';
import * as SecureStore from 'expo-secure-store';
import { usePushNotifications } from '../../../../app/hooks/usePushNotifications';

const BindingPhoneNumberPageStepTwo = ({ bindingFormData, setBindingFormData, setScreen }: any) => {
    const [authError, setAuthError] = useState('');
    const [error, setError] = useState('');
    const [canSendOtp, setCanSendOtp] = useState(true);
    const [lockEmailInput, setLockEmailInput] = useState(false);
    const [data, setData] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [isLoading2, setIsLoading2] = useState(false);
    const [countdown, setCountdown] = useState(0);
    const { expoPushToken } = usePushNotifications();
    useEffect(() => {
        let timer: NodeJS.Timeout;
        if (countdown > 0) {
            timer = setInterval(() => {
                setCountdown((prev) => prev - 1);
            }, 1000);
        } else {
            setLockEmailInput(false); // Add this line to unlock input when countdown reaches 0
        }
        return () => {
            if (timer) clearInterval(timer);
        };
    }, [countdown]);
    // const handleVerification = async () => {
    //     setIsLoading(true);
    //     if (!forgetPasswordFormData.otp && !forgetPasswordFormData.email) {
    //         setAuthError('請確保所有資料都已填寫');
    //     } else if (!forgetPasswordFormData.otp) {
    //         setAuthError('請輸入OTP驗證碼');
    //     } else {
    //         setAuthError('');
    //         try {
    //             const result =
    //                 await authenticationService.verifyingOtpForgetPassword(
    //                     forgetPasswordFormData.email.toLowerCase(),
    //                     forgetPasswordFormData.otp,
    //                     setForgetPasswordFormData,
    //                     setData
    //                 );
    //             if (result === false) {
    //                 setAuthError('驗證OTP時發生錯誤，請稍後再試');
    //             }
    //         } catch (error) {
    //             console.error('Error verifying OTP:', error);
    //             setAuthError('驗證OTP時發生錯誤，請稍後再試');
    //         }
    //     }
    //     setIsLoading(false);
    // };

    // const handleFormDataChange: HandleForgetPasswordFormDataChange = (
    //     field,
    //     value
    // ) => {
    //     setForgetPasswordFormData((prevFormData) => ({
    //         ...prevFormData,
    //         [field]: value
    //     }));
    // };

    // const handleSubmitOtp = () => {
    //     if (forgetPasswordFormData.email) {
    //         if (canSendOtp) {
    //             const lowerCaseEmail =
    //                 forgetPasswordFormData.email.toLowerCase();
    //             setCanSendOtp(false);
    //             setLockEmailInput(true);
    //             authenticationService.sendForgetPasswordOtp(lowerCaseEmail);
    //             //can only request otp every 60 seconds
    //             setTimeout(() => {
    //                 setCanSendOtp(true);
    //                 setLockEmailInput(false);
    //             }, 60000);
    //             setAuthError('');
    //         } else {
    //             setAuthError('請等待一分鐘後再重新發送。');
    //         }
    //     } else {
    //         setAuthError('請確保所有資料都已填寫。');
    //     }
    // };

    // const handleFinishResetPassword = async () => {
    //     if (
    //         forgetPasswordFormData.newPassword !==
    //         forgetPasswordFormData.confirmedNewPassword
    //     ) {
    //         setError('請確保新密碼和確認密碼相同');
    //     } else {
    //         setError('');
    //         setIsLoading2(true);
    //         try {
    //             const success = await authenticationService.changePassword(
    //                 forgetPasswordFormData.confirmedNewPassword,
    //                 data
    //             );
    //             if (success) {
    //                 setScreen(1);
    //             } else {
    //                 setError('密碼重置失敗，請稍後再試');
    //             }
    //         } catch (error) {
    //             console.error('Error changing password:', error);
    //             setError('發生錯誤，請稍後再試');
    //         } finally {
    //             setIsLoading2(false);
    //         }
    //     }
    // };

    const handleConfirmBindingPhone = async () => {
        setIsLoading2(true);
        try {
            const result = await authenticationService.confirmBindingPhone(
                bindingFormData.phoneNumber,
                bindingFormData.otp,
                expoPushToken?.data ||
                    `ExponentPushToken[TestToken${Math.random().toString(36).substring(2, 8).toUpperCase()}]`
            );

            if (result.status == 200) {
                setScreen(2);
            } else {
                setError('綁定手機號碼失敗，請檢查您輸入的OTP並再試一次');
            }
        } catch (error) {
            Alert.alert('綁定手機號碼失敗，請檢查您輸入的OTP並再試一次');
        } finally {
            setIsLoading2(false);
        }
    };
    const handleRequestOtp = async () => {
        try {
            //this check if phone same,
            const checkPhoneSame = await authenticationService.checkPhoneSame(bindingFormData.phoneNumber);
            console.log('checkPhoneSame', checkPhoneSame);
            if (checkPhoneSame?.status == 422) {
                //this means phone not same
                Alert.alert('確認您的手機號碼', '您以後將使用現在輸入的號碼進行登入。請按下確認表示您已知悉。', [
                    {
                        text: '確認並發出驗證碼',
                        onPress: async () => {
                            try {
                                const token = await SecureStore.getItemAsync('accessToken');
                                const changePhoneResult = await authenticationService.changePhone(
                                    bindingFormData.phoneNumber,
                                    token
                                );

                                if (changePhoneResult == true) {
                                    //this means change phone success
                                    try {
                                        const requestOtp = await authenticationService.checkPhoneSame(
                                            bindingFormData.phoneNumber
                                        );

                                        if (requestOtp.status == 200) {
                                            //this means request otp success
                                            setLockEmailInput(true);
                                            setCountdown(60);
                                        } else {
                                            setError('發送OTP失敗，請聯絡工作人員');
                                        }
                                    } catch (error) {
                                        console.log(error);
                                    }
                                } else {
                                    //this means change phone failed
                                    Alert.alert('修改手機號碼失敗，請稍後再試');
                                }
                            } catch (error) {
                                console.log(error);
                            }
                        }
                    }
                ]);
            } else {
                //this means phone same
                if (checkPhoneSame?.status == 200) {
                    //this means request otp success
                    setLockEmailInput(true);
                    setCountdown(60); // Start 60 second countdown
                } else {
                    setError('發送OTP失敗，請稍後再試');
                }
            }
        } catch (error) {
            console.log(error);
        }
    };

    return (
        <>
            <View style={styles.container}>
                <View style={styles.bottomContainer}>
                    <Text style={styles.text}>請輸入手機號碼，此手機號碼將用作登入用途</Text>
                    <PhoneInput
                        value={bindingFormData?.phoneNumber || ''}
                        onChangeText={(phoneNumber) => {
                            setBindingFormData({
                                ...bindingFormData,
                                phoneNumber: phoneNumber
                            });
                        }}
                        placeholder="請輸入手機號碼"
                        editable={!lockEmailInput}
                        extendedStyle={{ opacity: !lockEmailInput ? 1 : 0.5 }}
                    />
                    {/* <NormalInput
                        placeholder="請輸入手機號碼"
                        onChangeText={(phoneNumber) =>
                            setBindingFormData({
                                ...bindingFormData,
                                phoneNumber: phoneNumber
                            })
                        }
                        // editable={!lockEmailInput}
                        // extendedStyle={{ opacity: !lockEmailInput ? 1 : 0.5 }}
                    /> */}
                    <View
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            paddingVertical: 10,
                            gap: 10
                        }}
                    >
                        <NumberInput
                            placeholder="OTP驗證碼"
                            onChangeText={(t) => setBindingFormData({ ...bindingFormData, otp: t })}
                            // editable={!forgetPasswordFormData.otpAuthCompleted}
                            extendedStyle={{
                                flex: 1
                                // opacity: !forgetPasswordFormData.otpAuthCompleted ? 1 : 0.5
                            }}
                        />
                        <NormalButton
                            title={
                                <Text style={{ color: '#fff' }}>
                                    {lockEmailInput ? `已發送 (${countdown}s)` : '發送'}
                                </Text>
                            }
                            onPress={handleRequestOtp}
                            extendedStyle={{ flex: 1 / 2, opacity: lockEmailInput ? 0.5 : 1 }}
                            disabled={lockEmailInput}
                        />
                    </View>
                    <NormalButton
                        title={<Text style={{ color: '#fff' }}>{isLoading2 ? '處理中...' : '確認'}</Text>}
                        onPress={handleConfirmBindingPhone}
                        // extendedStyle={
                        //     forgetPasswordFormData.otpAuthCompleted == true ? { backgroundColor: '#70787C' } : {}
                        // }
                    />
                    {/* {lockEmailInput && (
                        <Pressable
                            // disabled={forgetPasswordFormData.otpAuthCompleted}
                            onPress={() => setLockEmailInput(false)}
                        >
                            <Text
                                style={[
                                    styles.footer
                                    // forgetPasswordFormData.otpAuthCompleted && {
                                    //     opacity: 0.5
                                    // }
                                ]}
                            >
                                重新整理
                            </Text>
                        </Pressable>
                    )} */}

                    {/* {authError && <Text style={styles.errorMessage}>{authError}</Text>}
                    {lockEmailInput && (
                        <Pressable
                            disabled={forgetPasswordFormData.otpAuthCompleted}
                            onPress={() => setLockEmailInput(false)}
                        >
                            <Text
                                style={[
                                    styles.footer,
                                    forgetPasswordFormData.otpAuthCompleted && {
                                        opacity: 0.5
                                    }
                                ]}
                            >
                                修改電子郵件
                            </Text>
                        </Pressable>
                    )}

                    {forgetPasswordFormData.otpAuthCompleted && (
                        <View
                            style={[
                                styles.hiddenPasswordFields,
                                forgetPasswordFormData.otpAuthCompleted ? styles.opacityFull : styles.opacityZero
                            ]}
                        >
                            <NormalInput
                                placeholder="新密碼"
                                onChangeText={(t) => handleFormDataChange('newPassword', t)}
                                secureTextEntry={true}
                                textContentType={'oneTimeCode'}
                            />
                            <NormalInput
                                placeholder="確認密碼"
                                onChangeText={(t) => handleFormDataChange('confirmedNewPassword', t)}
                                secureTextEntry={true}
                                textContentType={'oneTimeCode'}
                            />
                            <NormalButton
                                title={<Text style={{ color: '#fff' }}>{isLoading ? '重置中...' : '重置'}</Text>}
                                onPress={handleFinishResetPassword}
                                extendedStyle={{}}
                            />
                        </View>
                    )} */}

                    {error && <Text style={styles.errorMessage}>{error}</Text>}
                </View>
            </View>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginHorizontal: 20
    },

    titleText: {
        fontSize: 24,
        fontWeight: '300'
    },
    bottomContainer: {
        flex: 3,
        paddingBottom: 100
    },
    breakline: {
        width: 24,
        height: 1,
        backgroundColor: '#000000',
        marginVertical: 17
    },
    text: {
        fontSize: 18,
        paddingBottom: 10
    },
    hiddenPasswordFields: {
        gap: 10,
        paddingTop: 10
    },
    opacityZero: {
        opacity: 0
    },
    opacityFull: {
        opacity: 1
    },
    errorMessage: {
        fontSize: 14,
        color: '#ff0033',
        fontWeight: '400',
        marginLeft: 10,
        marginTop: 10
    },
    footer: { color: '#02677D', fontSize: 16, paddingVertical: 10 }
});

export default BindingPhoneNumberPageStepTwo;