import React, { useState, useEffect } from 'react';
import { router } from 'expo-router';
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
import { auth } from '@/contexts/firebase';
import { useAuth } from '@/contexts/AuthContext';
import { View, ScrollView, Text, TouchableOpacity } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useFormik } from 'formik';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import {
  providerMenu,
  PageHeader,
  StyledContainer,
  InnerContainer,
  StyledFormArea,
  Title,
  SubTitle,
  PageImage,
  StyledButton,
  ButtonText,
  MessageBox,
  LoginTextInput,
  RegisterDropdownInput,
} from '../components/generalHelpers.jsx';

export default function Register() {
  const [providerDropdownOpen, setProviderDropdownOpen] = useState(false);
  const [hidePassword, setHidePassword] = useState(true);
  const [registerButtonDisabled, setRegisterButtonDisabled] = useState(true);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const { user } = useAuth();

  const formik = useFormik({
    initialValues: {
      firstName: '',
      lastName: '',
      number: '',
      provider: '',
      email: '',
      password: '',
      passwordConfirmation: ''
    },
    onSubmit: async (values) => {
      setError('');
      setLoading(true);
      try {
        const userCredential = await createUserWithEmailAndPassword(auth, values.email, values.password);
        await updateProfile(userCredential.user, {
          displayName: `${values.firstName} ${values.lastName}`
        });
        router.replace('./incidents');
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
  });

  const formValues = formik.values;

  useEffect(() => {
    if (formValues) {
      if (
        formValues.email &&
        formValues.firstName &&
        formValues.lastName &&
        formValues.password.length !== 0 &&
        formValues.password === formValues.passwordConfirmation
      ) {
        setRegisterButtonDisabled(false);
      } else {
        setRegisterButtonDisabled(true);
      }
    } else {
      setRegisterButtonDisabled(true);
    }
  }, [formValues]);

  useEffect(() => {
    if (user) {
      router.replace('./incidents');
    }
  }, [user]);

  return (
    <View>
      <PageHeader>
        <View style={{ flexDirection: 'row', height: 80, alignItems: 'flex-end' }}>
          <TouchableOpacity onPress={router.back} style={{ flexDirection: 'row', alignItems: 'center', paddingBottom: 5 }}>
            <Ionicons name="chevron-back-outline" size={22} color="red" style={{ paddingLeft: 20 }} />
            <Text style={{ color: 'red', fontWeight: 600 }}>Back to Login</Text>
          </TouchableOpacity>
        </View>
      </PageHeader>
      <ScrollView>
        <StyledContainer>
          <StatusBar style="dark" />
          <SafeAreaView />
          <InnerContainer>
            <PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
            {error ? <MessageBox style={{ color: 'red' }}>{error}</MessageBox> : null}
            <Title>Tones</Title>
            <SubTitle>Account Register</SubTitle>
            <StyledFormArea>
              <LoginTextInput
                label="First Name"
                icon="person-outline"
                placeholder="Bud"
                placeholderTextColor="gray"
                onChangeText={formik.handleChange('firstName')}
                onBlur={formik.handleBlur('firstName')}
                value={formik.values.firstName}
              />
              <LoginTextInput
                label="Last Name"
                icon="people-outline"
                placeholder="Doble"
                placeholderTextColor="gray"
                onChangeText={formik.handleChange('lastName')}
                onBlur={formik.handleBlur('lastName')}
                value={formik.values.lastName}
              />
              <LoginTextInput 
                label="Phone Number"
                icon="call-outline"
                placeholder="123-456-7890"
                placeholderTextColor="gray"
                onChangeText={formik.handleChange('number')}
                onBlur={formik.handleBlur('number')}
                value={formik.values.number.replace(/^(\d{3})(\d{3})(\d+)$/, "($1) $2-$3")}
                keyboardType="number-pad"
                maxLength={14}
              />
              <RegisterDropdownInput
                label="Cellular Provider"
                isOpen={providerDropdownOpen}
                setOpen={setProviderDropdownOpen}
                selectedValue={formik.values.provider}
                onValueChange={formik.handleChange('provider')}
                menu={providerMenu}
              />
              <LoginTextInput 
                label="Email Address"
                icon="mail-outline"
                placeholder="test@organization.com"
                placeholderTextColor="gray"
                onChangeText={formik.handleChange('email')}
                onBlur={formik.handleBlur('email')}
                value={formik.values.email}
                keyboardType="email-address"
              />
              <LoginTextInput 
                label="Password"
                icon="lock-closed-outline"
                placeholder="* * * * * *"
                placeholderTextColor="gray"
                onChangeText={formik.handleChange('password')}
                onBlur={formik.handleBlur('password')}
                value={formik.values.password}
                secureTextEntry={hidePassword}
                isPassword
                hidePassword={hidePassword}
                setHidePassword={setHidePassword}
              />
              <LoginTextInput 
                label="Confirm Password"
                icon="shield-checkmark-outline"
                placeholder="* * * * * *"
                placeholderTextColor="gray"
                onChangeText={formik.handleChange('passwordConfirmation')}
                onBlur={formik.handleBlur('passwordConfirmation')}
                value={formik.values.passwordConfirmation}
                secureTextEntry={hidePassword}
                isPassword
                hidePassword={hidePassword}
                setHidePassword={setHidePassword}
              />
              <MessageBox>...</MessageBox>
              <StyledButton onPress={formik.handleSubmit} style={registerButtonDisabled ? {backgroundColor: 'grey'} : {}}>
                <ButtonText>Register</ButtonText>
              </StyledButton>
            </StyledFormArea>
          </InnerContainer>
        </StyledContainer>
      </ScrollView>
    </View>
  )
}