import * as React from 'react';
import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
import { StyleSheet, View, Image, TouchableOpacity} from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { Button, Text, TextInput, Divider } from 'react-native-paper';

WebBrowser.maybeCompleteAuthSession();    

export default function About({navigation}) {
    const [accessToken, setAccessToken] = React.useState(null);
    const [user, setUser] = React.useState(null);
    const [text, setText] = React.useState(null);
    const [text2, setText2] = React.useState(null);
    const [text3, setText3] = React.useState(null);
    const [request, response, promptAsync] = Google.useAuthRequest({
        clientId:"651131042419-nku2iod9kjulk7g2ipj8v51v842c1j9o.apps.googleusercontent.com",
        iosClientId: "651131042419-7lu7jen40pbkifledd8ed8itkvo6255b.apps.googleusercontent.com",
    });

    React.useEffect(() => {
        if(response?.type === "success") {
            setAccessToken(response.authentication.accessToken);
            accessToken && fetchUserInfo();
        }
    }, [response, accessToken])
    
    const fetchUserInfo = async () => {
        let response = await fetch("https://www.googleapis.com/userinfo/v2/me", {
            headers: {Authorization: `Bearer ${accessToken}`}
        })
        
        response.json().then(data => {
            setUser(data);
        })
    }

    const ShowUserInfo = () => {
        if(user) {
            return(
                <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                  <Text style={{fontSize: 35, fontWeight: 'bold', marginBottom: 20}}>Welcome</Text>
                  <Image source={{uri: user.picture}} style={styles.profilePic} />
                  {console.log(user.name)}
                </View>
              )
        }
    }

    const InsertDataToServer = () => {
        
        fetch('https://ada.uprrp.edu/~pablo.puig1/TPMG/loginUserAdd.php', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
        
            name: text,
        
            email: text2,
        
            phone: text3
        
        })
    }).then((response) => response.json())
        .then((responseJson) => {
    
    // Showing response message coming from server after inserting records.
            Alert.alert(responseJson);
    
        }).catch((error) => {
            console.error(error);
        });

  }

    return (
        <View style={styles.container}>
        
        <Text style={{fontSize:30, fontWeight:"bold",  marginVertical: 0, marginHorizontal: 80}}>
              Crear Cuenta
          </Text>

          <TextInput style={{width: 350, marginVertical: 40, marginHorizontal: 10}}
              label="Nombre"
              value={text}
              mode = "outlined"
              outlineColor='#327ABC'
              onChangeText={text => setText(text)}
          />

        <TextInput style={{width: 350, marginVertical: -20, marginHorizontal: 10}}
              label="Email"
              value={text2}
              mode = "outlined"
              outlineColor='#327ABC'
              onChangeText={text2 => setText2(text2)}
          />

        <TextInput style={{width: 350, marginVertical: 40, marginHorizontal: 10}}
              label="Número de telefono"
              value={text3}
              mode = "outlined"
              outlineColor='#327ABC'
              onChangeText={text3 => setText3(text3)}
          />

<Button style={{width: 250, marginVertical: 40, marginHorizontal: 60}}
          buttonColor = "#327ABC"
          mode="contained"
          onPress={()=> {InsertDataToServer(); navigation.navigate('Profile', {userName:text, email:text2, phone:text3})}}>
              Crear cuenta
          </Button>




          <Divider style={{marginVertical: -20}}
          horizontalInset='true' />

        
          
          <Button style={{width: 250, marginVertical: 70, marginHorizontal: 60}}
          buttonColor = "teal"
          mode="contained"
          onPress={accessToken ? fetchUserInfo: () => promptAsync({useProxy:true, showInRecents:true})}>
              Crear cuenta con Google
          </Button>
		
	    </View>
    );

    
}

const styles = StyleSheet.create({
    container: {
        padding: 24
    },
    profilePic: {
        width: 50,
        height: 50
    },
    userInfo: {
        alignItems: 'center',
        justifyContent: 'center'
    }
});