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

const SignUp = () => {
  const navigation = useNavigation();
  const [loading, setLoading] = useState<boolean>(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [emailPlaceholderOpacity, setEmailPlaceholderOpacity] = useState(0.5);
  const [passwordPlaceholderOpacity, setPasswordPlaceholderOpacity] = useState(0.5);
  const [confirmPasswordPlaceholderOpacity, setConfirmPasswordPlaceholderOpacity] = 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 handleConfirmPasswordFocus = () => {
    setConfirmPasswordPlaceholderOpacity(1);
  };

  const handleConfirmPasswordBlur = () => {
    if (!confirmPassword) {
      setConfirmPasswordPlaceholderOpacity(0.5);
    }
  };

  const handleSignUp = () => {
    navigation.navigate('HomePage'); 
  };

  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}
      />
      <Text style={styles.text}>Confirm Password: </Text>
      <TextInput 
        style={[styles.input, { opacity: confirmPasswordPlaceholderOpacity }]}
        onChangeText={setConfirmPassword}
        onFocus={handleConfirmPasswordFocus}
        onBlur={handleConfirmPasswordBlur}
        value={confirmPassword}
        placeholder="Confirm Password"
        autoCapitalize="none"
        secureTextEntry={true}
      />
      <TouchableOpacity
        style={[styles.signUpButton, loading ? styles.buttonDisabled : styles.buttonEnabled]}
        onPress={handleSignUp}
        disabled={loading}
      >
        <Text style={styles.buttonText}>Sign Up</Text>
      </TouchableOpacity>
    </View>
  );
};

export default SignUp;

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