import React, {useState, useEffect, 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 {onFacebookButtonPress, googleLogin, login} from '../../util/auth';
import {AuthContext} from '../../store/AuthContext';
import {GoogleSignin} from '@react-native-google-signin/google-signin';

const Login = () => {
  const navigation = useNavigation();
  const authCtx = useContext(AuthContext);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  useEffect(() => {
    GoogleSignin.configure();
  }, []);
  const loginHandler = async () => {
    try {
      const res = await login(email, password);
      authCtx.authenticate(res.data.idToken);
    } catch (error) {
      console.log(error);
      Alert.alert('Signup Failed', 'Something went wrong!');
    }
  };

  const googleLoginHandler = async () => {
    try {
      const res = await googleLogin();
      console.log(res.idToken);
      authCtx.authenticate(res.idToken);
    } catch (error) {
      console.log(error);
      Alert.alert('Signup Failed', 'Something went wrong!');
    }
    // navigation.navigate('MedicineList');
  };
  const facebookLoginHandler = async () => {
    const result = await onFacebookButtonPress();
    console.log(result);
    authCtx.authenticate(result.idToken);
  };

  return (
    <Background>
      <View style={styles.mainContainer}>
        <View style={styles.formContainer}>
          <Field
            placeholder="Email / Username"
            value={email}
            onChangeText={setEmail}
            keyboardType={'email-address'}
          />
          <Field
            placeholder="Password"
            value={password}
            onChangeText={setPassword}
            secureTextEntry={true}
          />
          <View style={styles.forgotContiner}>
            <Text style={styles.forgotText}>Forgot Password ?</Text>
          </View>
          <Btn
            textColor="white"
            bgColor={Colors.darkGreen}
            btnLabel="Login"
            Press={loginHandler}
          />
          <View style={styles.noAccountContiner}>
            <Text style={styles.noAccText}>Don't have an account ?</Text>
            <TouchableOpacity onPress={() => navigation.navigate('Signup')}>
              <Text style={styles.sigupText}>Signup</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.socialLoginContainer}>
            <TouchableOpacity style={styles.button}>
              <Icon.Button
                name="facebook"
                style={styles.facebook}
                onPress={facebookLoginHandler}
                //   // onFacebookButtonPress().then(() =>
                //     console.log('Signed in with Facebook!')
                //   // )
                // }
              >
                Login with Facebook
              </Icon.Button>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button}>
              <Icon.Button
                name="google"
                style={styles.google}
                onPress={googleLoginHandler}>
                Login with Google
              </Icon.Button>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </Background>
  );
};

const styles = StyleSheet.create({
  mainContainer: {alignItems: 'center', width: '100%'},
  formContainer: {
    height: 400,
    width: 360,
    paddingTop: 100,
    alignItems: 'center',
  },
  forgotContiner: {
    alignItems: 'flex-end',
    width: '78%',
    paddingRight: 16,
    marginBottom: 200,
  },
  forgotText: {
    color: Colors.darkGreen,
    fontWeight: 'bold',
    fontSize: 16,
  },
  socialLoginContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
  },
  button: {
    paddingVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 5,
  },
  sigupText: {
    color: Colors.darkGreen,
    fontWeight: 'bold',
    fontSize: 16,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  noAccountContiner: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
  },
  noAccText: {fontSize: 16, fontWeight: 'bold'},
  facebook: {
    backgroundColor: '#3b5998',
  },
  google: {
    backgroundColor: '#ff3333',
  },
});

export default Login;
