import React, {useState, useContext} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import Background from '../Background';
import Btn from '../Button';
import {Colors} from '../../constants/Constants';
import Field from '../ui/Field';
import {useNavigation} from '@react-navigation/native';
import {AuthContext} from '../../store/AuthContext';
import {signup} from '../../util/auth';

const Signup = () => {
  const navigation = useNavigation();
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [confirmEmail, setConfirmEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [contact, setContact] = useState('');
  const authCtx = useContext(AuthContext);

  const submitHandler = async () => {
    const emailIsValid = email.includes('@');
    const passwordIsValid = password.length > 6;
    const emailsAreEqual = email === confirmEmail;
    const passwordsAreEqual = password === confirmPassword;

    if (
      !emailIsValid ||
      !passwordIsValid ||
      !emailsAreEqual ||
      !passwordsAreEqual
    ) {
      Alert.alert('Invalid input', 'Please check your entered credentials.');
      return;
    } else {
      try {
        const res = await signup(email, password);
        authCtx.authenticate(res.data.idToken);
      } catch (error) {
        console.log(error);
        Alert.alert('Signup Failed', 'Something went wrong!');
      }
      navigation.navigate('MedicineList');
    }
  };

  return (
    <Background>
      <View style={styles.mainContiner}>
        <Text style={styles.signupText}>Sign Up</Text>
        <View style={styles.formContiner}>
          <Field
            placeholder="First Name"
            value={firstName}
            onChangeText={setFirstName}
          />
          <Field
            placeholder="Last Name"
            value={lastName}
            onChangeText={setLastName}
          />
          <Field
            placeholder="Email / Username"
            keyboardType={'email-address'}
            value={email}
            onChangeText={setEmail}
          />
          <Field
            placeholder="Confirm Email"
            keyboardType={'email-address'}
            value={confirmEmail}
            onChangeText={setConfirmEmail}
          />
          <Field
            placeholder="Password"
            secureTextEntry={true}
            value={password}
            onChangeText={setPassword}
          />
          <Field
            placeholder="Confirm Password"
            secureTextEntry={true}
            value={confirmPassword}
            onChangeText={setConfirmPassword}
          />
          <Field
            placeholder="Contact Number"
            keyboardType={'default'}
            value={contact}
            onChangeText={setContact}
          />
          <View
            style={{
              display: 'flex',
              flexDirection: 'row',
              width: '78%',
              paddingRight: 12,
            }}></View>
          <Btn
            textColor="white"
            bgColor={Colors.darkGreen}
            btnLabel="Signup"
            Press={submitHandler}
          />
          <View
            style={{
              display: 'flex',
              flexDirection: 'row',
              justifyContent: 'center',
            }}>
            <Text style={{fontSize: 16, fontWeight: 'bold'}}>
              Already have an account ?{' '}
            </Text>
            <TouchableOpacity onPress={() => navigation.navigate('Login')}>
              <Text
                style={{
                  color: Colors.darkGreen,
                  fontWeight: 'bold',
                  fontSize: 16,
                }}>
                Login
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.socialContainer}>
            <TouchableOpacity style={styles.button}>
              <Icon.Button name="facebook" style={styles.facebook}>
                Login with Facebook
              </Icon.Button>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button}>
              <Icon.Button name="google" style={styles.google}>
                Login with Google
              </Icon.Button>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Background>
  );
};

const styles = StyleSheet.create({
  mainContiner: {alignItems: 'center', width: '100%', padding: 10},
  signupText: {
    color: Colors.green,
    fontSize: 32,
    fontWeight: 'bold',
    marginTop: 10,
  },
  formContiner: {
    width: 360,
    alignItems: 'center',
  },
  socialContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
  },
  button: {
    paddingVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  facebook: {
    backgroundColor: '#3b5998',
  },
  google: {
    backgroundColor: '#ff3333',
  },
});

export default Signup;
