import { useNavigation } from 'expo-router';
import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput } from 'react-native';

const Login = () => {
  const navigation = useNavigation();
  const [loading, setLoading] = useState<boolean>(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [emailPlaceholderOpacity, setEmailPlaceholderOpacity] = useState(0.5);
  const [passwordPlaceholderOpacity, setPasswordPlaceholderOpacity] = useState(0.5);

  const handleEmailFocus = () => {
    setEmailPlaceholderOpacity(1);
  };

  const handleEmailBlur = () => {
    if (!email) {
      setEmailPlaceholderOpacity(0.5);
    }
  };

  const handlePasswordFocus = () => {
    setPasswordPlaceholderOpacity(1);
  };

  const handlePasswordBlur = () => {
    if (!password) {
      setPasswordPlaceholderOpacity(0.5);
    }
  };
  const handleLogin = () => {
    navigation.navigate('HomePage');
  };
  const handleForgotPW = () => {
    navigation.navigate('forgotPW');
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Email: </Text>
      <TextInput style={[styles.input, { opacity: emailPlaceholderOpacity }]}
        onChangeText={setEmail}
        onFocus={handleEmailFocus}
        onBlur={handleEmailBlur}
        value={email}
        placeholder="Email"
        autoCapitalize="none"
      />
      <Text style={styles.text}>Password: </Text>
      <TextInput style={[styles.input, { opacity: passwordPlaceholderOpacity }]}
        onChangeText={setPassword}
        onFocus={handlePasswordFocus}
        onBlur={handlePasswordBlur}
        value={password}
        placeholder="Password"
        autoCapitalize="none"
        secureTextEntry={true}
      />
      <TouchableOpacity onPress={handleForgotPW}>
                <Text style={styles.forgotPW}>Forgot Password</Text>
            </TouchableOpacity>
            <TouchableOpacity
                style={[styles.loginButton, loading ? styles.buttonDisabled : styles.buttonEnabled]}
                onPress={handleLogin}
                disabled={loading}
            >
                <Text style={styles.buttonText}>Login</Text>
            </TouchableOpacity>
    </View>
  );
};

export default Login;

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  text: {
    alignSelf: 'flex-start',
    fontSize: 16,
    marginTop: 10,
    marginBottom: 5,
    color: '#0075ff',
    fontWeight: '500',
  },
  input: {
    padding: 10,
    borderBottomWidth: 1,
    borderColor: '#ccc',
    marginBottom: 20,
    width: '90%',
  },
  forgotPW: {
    color:'#0075ff',
    fontSize: 12,
    marginBottom: 3,
    fontWeight: '600',
    padding: 5,
  },
  loginButton: {
    padding: 10,
    borderRadius: 30,
    alignItems: 'center',
    backgroundColor: '#007BFF',
    width: '50%',
  },
  buttonText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 600
  },
  buttonEnabled: {
    backgroundColor: '#007BFF',
  },
    buttonDisabled: {
    backgroundColor: '#A9A9A9',
  },
});
