import { View, Text, StyleSheet, ActivityIndicator, Pressable } from 'react-native';
import NormalInput from '../../../global/normal_input';
import NormalButton from '../../../global/normal_button';
import { Ionicons } from '@expo/vector-icons';
import { useState } from 'react';
import useSignUpStore from '../../../../providers/signup_form_store';
import { authenticationService } from '../../../../service/authService';
import { Alert } from 'react-native';
import useVehicleStore from '../../../../providers/vehicle_store';
import { usePushNotifications } from '../../../../app/hooks/usePushNotifications';
import { useTranslation } from '../../../../util/hooks/useTranslation';

type CreateWalletProps = {
    goToNextPage: () => void;
};

const CreateWallet: React.FC<CreateWalletProps> = ({ goToNextPage }) => {
    const { expoPushToken } = usePushNotifications();
    const [isLoading, setIsLoading] = useState(false);
    const { signUpFormData, setSignUpFormData } = useSignUpStore();
    const [error, setError] = useState('');
    const [showPassword1, setShowPassword1] = useState(false);
    const [showPassword2, setShowPassword2] = useState(false);
    const [passwordConfirm, setPasswordConfirm] = useState('');
    const {
        BrandID,
        ModelID,
    } = useVehicleStore();
    const { t, ready, currentLanguage } = useTranslation();

    console.log('expoPushToken?.data', expoPushToken?.data);

    let customerData: any = {
        customerBaseInfo: {
            name: signUpFormData.nickName.trim(),
            email: signUpFormData.email,
            password: signUpFormData.password,
            gender: signUpFormData.gender,
            birthday: signUpFormData.birthDateDay + '/' + signUpFormData.birthDateMonth + '/11',
            address: signUpFormData.address,
            phone: parseInt(signUpFormData.phone as string, 10),
            isUberDriver: signUpFormData.isUberDriver,
            notify_session_id:
                expoPushToken?.data ||
                `ExponentPushToken[TestToken${Math.random().toString(36).substring(2, 8).toUpperCase()}]`
        }
    };
    if (ModelID !== '' && BrandID !== '' && signUpFormData.licensePlate !== '') {
        customerData.customerCarInfo = {
            type_id: ModelID,
            brand_id: BrandID,
            licensePlate: signUpFormData.licensePlate
        };
    }

    const handleNext = async () => {
        if (
            signUpFormData.email === '' ||
            signUpFormData.password === '' ||
            signUpFormData.phone === '' ||
            passwordConfirm === ''
        ) {
            setError(t("register.four.error1"));
        } else if (signUpFormData.password !== passwordConfirm) {
            Alert.alert(t("register.four.alert1"));
        } else {
            setError('');
            setIsLoading(true);
            try {
                const result = await authenticationService.signUp(customerData);
                console.log('handleNext in CreateWallet Page, i am sending this customerData', customerData);
                if (result) {
                    goToNextPage();
                } else {
                    Alert.alert(t("register.four.alert2"));
                }
            } catch (error) {
                setError(t("register.four.error2"));
            } finally {
                setIsLoading(false);
            }
        }
    };

    return (
            <View style={styles.container}>
                <Text style={styles.text}>{t("register.four.label")}</Text>
                <View
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: 10
                    }}
                >
                    <NormalInput
                        placeholder={t("register.four.label")}
                        onChangeText={(email) =>
                            setSignUpFormData({
                                ...signUpFormData,
                                email: email
                            })
                        }
                        autoCapitalize="none"
                    />

                    <NormalInput
                        placeholder={t("register.four.password")}
                        onChangeText={(text) => {
                            setSignUpFormData({
                                ...signUpFormData,
                                password: text
                            });
                        }}
                        secureTextEntry={!showPassword1}
                    />
                    <Pressable
                        className="absolute right-4 top-0 bottom-0 justify-center"
                        onPress={() => setShowPassword1(!showPassword1)}
                    >
                        <Ionicons name={showPassword1 ? 'eye-outline' : 'eye-off-outline'} size={24} color="#02677D" />
                    </Pressable>
                    <View className="mb-4">
                        <NormalInput
                            placeholder={t("register.four.confirmPassword")}
                            onChangeText={(text) => setPasswordConfirm(text)}
                            secureTextEntry={!showPassword2}
                        />
                        <Pressable
                            className="absolute right-4 top-0 bottom-0 justify-center"
                            onPress={() => setShowPassword2(!showPassword2)}
                        >
                            <Ionicons
                                name={showPassword2 ? 'eye-outline' : 'eye-off-outline'}
                                size={24}
                                color="#02677D"
                            />
                        </Pressable>
                    </View>
                </View>
                {error && <Text style={styles.errorMessage}>{error}</Text>}
                <View>
                    <NormalButton
                        title={isLoading ? <ActivityIndicator /> : <Text style={{ color: '#fff' }}>{t("register.four.complete")}</Text>}
                        onPress={handleNext}
                        extendedStyle={{}}
                    />
                </View>
            </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginHorizontal: 20
    },
    text: {
        fontSize: 20,
        paddingBottom: 10
    },
    errorMessage: {
        fontSize: 14,
        color: '#ff0033',
        fontWeight: '400',
        marginLeft: 10,
        marginBottom: 10
    }
});
export default CreateWallet;