import { useSignUp } from '@clerk/clerk-expo'
import { router } from 'expo-router'
import React from 'react'
import { StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'

export default function SignUpScreen() {
    const { signUp, setActive, isLoaded } = useSignUp()
    const [fname, setFname] = React.useState('')
    const [lname, setLname] = React.useState('')
    const [email, setUsername] = React.useState('')
    const [password, setPassword] = React.useState('')

    async function handleSignUp() {
        if (!isLoaded) return

        try {
            // Start Auth
            const signUpAttempt = await signUp.create({
                firstName: fname,
                lastName: lname,
                emailAddress: email,
                password
            })

            // Set confirmation
            await signUp.prepareVerification({
                strategy: 'email_link',
                redirectUrl: '/'
            })

            if (signUpAttempt.status === 'complete') {
                setActive({ session: signUpAttempt.createdSessionId })
                router.replace('/')
            } else {
                console.log(signUpAttempt)
            }
        } catch (e) {
            console.log(JSON.stringify(e))
        }
    }

    return (
        <View style={styles.container}>
            <Text style={styles.text}>Create an account</Text>
            <View style={{ width: '80%', marginTop: 20 }}>
                <Text style={styles.textlabel}>First name</Text>
                <TextInput style={styles.input} value={fname} placeholder='Enter first name' onChangeText={setFname} />
                <Text style={styles.textlabel}>Last name</Text>
                <TextInput style={styles.input} value={lname} placeholder='Enter last name' onChangeText={setLname} />
                <Text style={styles.textlabel}>Email</Text>
                <TextInput style={styles.input} value={email} placeholder='Enter email' onChangeText={setUsername} />
                <Text style={styles.textlabel}>Password</Text>
                <TextInput
                    style={styles.input}
                    value={password}
                    placeholder='Enter password'
                    secureTextEntry
                    onChangeText={setPassword}
                />
                <TouchableOpacity
                    style={styles.button}
                    onPress={() => {
                        handleSignUp()
                    }}
                >
                    <Text style={{ color: '#fff', fontWeight: 'bold' }}>Sign Up</Text>
                </TouchableOpacity>
                <Text style={styles.textCenter}>Already have an account?</Text>
                <TouchableOpacity
                    style={styles.signIn}
                    onPress={() => {
                        router.navigate('/sign-in')
                    }}
                >
                    <Text style={{ color: '#fff' }}>Sign In</Text>
                </TouchableOpacity>{' '}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#25292e',
        justifyContent: 'center',
        alignItems: 'center'
    },
    text: {
        color: '#fff'
    },
    textCenter: {
        color: '#ffffff',
        alignSelf: 'center',
        marginBottom: 6
    },
    textlabel: {
        color: '#fff',
        marginBottom: 3
    },
    input: {
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 10,
        marginBottom: 15
    },
    button: {
        backgroundColor: '#1e90ff',
        padding: 12,
        borderRadius: 5,
        alignItems: 'center',
        marginBottom: 15
    },
    signIn: {
        alignItems: 'center'
    }
})