import { useState } from 'react';
import { Button, StyleSheet, Text, TextInput, View } from 'react-native';

export default function App() {

  const [ email, setEmail ] = useState('');
  const [ senha, setSenha ] = useState('');
  const [ resultado, setResultado ] = useState<null|'logado'|'falhou'>(null);
  
  const handleLogin = () => {
    if (email.trim() == 'teste@teste.com' && senha.trim() == '123456') 
      setResultado('logado')
    else
      setResultado('falhou')
  }

  return (
    <View style={styles.container}>
        <Text>Login</Text>
        <TextInput  placeholder='Digite seu email' style={styles.textInput} onChangeText={setEmail}/>
        <TextInput  placeholder='Digite sua senha' style={styles.textInput} onChangeText={setSenha} secureTextEntry/>
        <Button title="Logar" onPress={handleLogin} />

        { resultado == 'logado' && <Text style={styles.success}>Logado com sucesso</Text>}
        { resultado == 'falhou' && <Text style={styles.fail}>Email ou senha incorreto</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    flex: 1,
    justifyContent: 'center'
  },
  textInput: {
    backgroundColor: 'lightgrey',
    padding: 2,
    marginVertical: 5
  },
  fail: {
    textAlign:'center',
    color: 'red'
  },
  success: {
    textAlign:'center',
    color: 'green'
  }
});