import { TextInput, View, StyleSheet, Button } from 'react-native'
import { useState } from 'react'
import { useRouter } from 'expo-router'
import { useAuthStore } from '../store'

export default function LoginView() {
	const [username, setUsername] = useState('')
	const [password, setPassword] = useState('')
	const router = useRouter()
	const { verify } = useAuthStore()	

	async function login() {
		try {
			const res = await verify(username, password)
			if (!res) return
			// Navigate to feed list on successful login
			router.push('/feed_list')
		} catch(e) {
			console.log("error on verifing your credentials")
			console.log(e)
		}
	}

	const styles = StyleSheet.create({
		container: {
			padding: 16,
			gap: 8
		},
		textfield: {
			borderColor: 'transparent',
    	borderBottomColor: '#ccc',
    	borderWidth: 1,
			paddingVertical: 4
		}
	})
	return <View style={styles.container}>
		<TextInput placeholder="Feedbin Email" style={styles.textfield} autoCapitalize="none" autoCorrect={false} textContentType="none" keyboardType="email-address" onChangeText={setUsername} />
		<TextInput placeholder="Password" style={styles.textfield} secureTextEntry={true} onChangeText={setPassword} />
		<Button title="Enter" onPress={login} />
	</View>
}