import { StyleSheet, Text, TextInput, Pressable, View } from 'react-native'
import { useState } from 'react'
import { handleLogin } from '../utils/helpers'

const Login = ({ setSession, showError }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const disabled = (e, p) => !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e) || p.length < 6;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Login to Notes</Text>
      <Text style={styles.text}>Account can be created through apps.pruss.it website</Text>
      <TextInput
        style={styles.input}
        autoComplete="email"
        placeholder="Email"
        placeholderTextColor="#BBB"
        keyboardType="email-address"
        returnKeyType="next"
        autoComplete="email"
        textContentType="emailAddress"
        value={email}
        onChange={e => setEmail(e.nativeEvent.text.toLowerCase())}
      />
      <TextInput
        style={styles.input}
        autoComplete="password"
        placeholder="Password"
        placeholderTextColor="#BBB"
        returnKeyType="next"
        autoComplete="password-new"
        secureTextEntry={true}
        textContentType="newPassword"
        value={password}
        onChange={e => setPassword(e.nativeEvent.text)}
      />
      <Pressable
        onPress={() => handleLogin({ email, password, setSession, showError })}
        style={{...styles.button, opacity: disabled(email, password) ? .3 : 1}}
        disabled={disabled(email, password)}
      >
        <Text style={styles.buttonText}>Login</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%'
  },
  title: {
    color: 'white',
    fontSize: 26,
    marginBottom: 40,
  },
  text: {
    color: 'white',
    marginBottom: 50,
  },
  input: {
    height: 50,
    width: 280,
    padding: 10,
    marginBottom: 20,
    color: 'white',
    backgroundColor: '#444',
    borderColor: '#aaa',
    borderWidth: 1,
    borderStyle: 'solid',
    borderRadius: 10,
  },
  button: {
    width: 100,
    height: 40,
    backgroundColor: '#666',
    borderRadius: 5,
    marginTop: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    color: 'white',
  }
});

export default Login;