import * as React from 'react';
import { Alert, View, Linking} from 'react-native';
import { Button, Text, TextInput, Divider } from 'react-native-paper';
import { useCallback } from "react";
import { createStackNavigator, createAppContainer } from 'react-navigation';  

const supportedURL = "https://docs.google.com/forms/d/e/1FAIpQLSe93-cuCFQ084AxVbzhwFJHjtPhrXFJ624ezAcqKU5qUsBqwg/viewform";

const OpenURLButton = ({ url, children }) => {
    const handlePress = useCallback(async () => {
      // Checking if the link is supported for links with custom URL scheme.
      const supported = await Linking.canOpenURL(url);
  
      if (supported) {
        // Opening the link with some app, if the URL scheme is "http" the web link should be opened
        // by some browser in the mobile
        await Linking.openURL(url);
      } else {
        Alert.alert(`Don't know how to open this URL: ${url}`);
      }
    }, [url]);
  
    return <Button buttonColor = "purple" 
            textColor= "white"
            style={{width: 250, marginVertical: 40, marginHorizontal: 90}}
            onPress={handlePress}>
                Llenar formulario de voluntario
            </Button> ;
  };


const MyComponent = () => {
    const [text, setText] = React.useState("");
    const [text2, setText2] = React.useState("");


  return (
    <View >

        <Text style={{fontSize:30, fontWeight:"bold",  marginVertical: 20, marginHorizontal: 110}}>
            Crear Cuenta
        </Text>
    
        <TextInput style={{width: 350, marginVertical: 40, marginHorizontal: 30}}
            label="Nombre"
            value={text}
            mode = "outlined"
            outlineColor='#327ABC'
            onChangeText={text => setText(text)}
        />

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

        <Button style={{width: 250, marginVertical: 70, marginHorizontal: 90}}
        buttonColor = "#327ABC"
        mode="contained"
        onPress={console.log(text)}>
            Crear cuenta
        </Button>
        <Divider style={{marginVertical: -20}}
        horizontalInset='true' />

        <Button style={{width: 250, marginVertical: 70, marginHorizontal: 90}}
        buttonColor = "teal"
        mode="contained" >
            Crear cuenta con Google
        </Button>
  
        
    </View>
  );
};

export default MyComponent;