import { Image, ScrollView, Text, View, Alert } from 'react-native';
import React, {useState} from 'react'
import { SafeAreaView } from 'react-native-safe-area-context';
import { Link } from 'expo-router'
import {images} from '../../constants';
import FormField from '../../components/FormField';
import CustomButton from '../../components/CustomButton';
import {createUser} from '../../lib/appwrite';


const SignUp = () => {
  const [ form, setForm] = useState({
    username: "",
    email: "",
    password: "",
    
  })
  const [ isSubmitting, setIsSubmitting] = useState(false)

  const submit = async () =>  {
    if(!form.username || !form.email || !form.password) {
      Alert.alert('Error', 'Please fill in all the required fields')
    }

    setIsSubmitting(true);

    try {
      const result = await createUser(form.email, form.password, form.username)


      router.replace('/home')
    } catch (error) {
      Alert.alert('Error', error.message)
    } finally {
      setIsSubmitting(false)
    }

  }

  return (
    <SafeAreaView className="bg-white h-full">
      <ScrollView>
        <View className="w-full justify-center min-h-[85vh] px-10 my-6">
          <Image source={images.logo}
          resizeMode='contain'
          className="w-full h-[135px]" />
          <Text className="text-2xl text-black text-semibold mt-10 font-psemibold">
            Register now and become part of Resurgence family
          </Text>

          <FormField 
          title="Username"
          value={form.username}
          handleChangeText={(e) => setForm({ ...form, username: e,
          })}
          otherStyles="mt-10"
          />
          <FormField 
          title="Email"
          value={form.email}
          handleChangeText={(e) => setForm({ ...form, email: e,
          })}
          otherStyles="mt-7"
          keyboardType="email-address"
          />
          <FormField 
          title="Password"
          value={form.password}
          handleChangeText={(e) => setForm({ ...form, password: e,
          })}
          otherStyles="mt-7"
          />

          <CustomButton 
          title="Sign up"
          handlePress={submit}
          containerStyle="mt-7"
          isLoading={isSubmitting}
          />
          <View className="justify-center pt-5 flex-row gap-2">
            <Text className="text-lg text-gray-500 font-pregular">
              Do you have account already?
            </Text>
            <Link href="/sign-in"
            className="text-lg font-psemibold font-secondary">Sign in</Link>
          </View>
        </View>
      </ScrollView>

    </SafeAreaView>
  )
}

export default SignUp