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: 30}}>
            Mi Cuenta
        </Text>
    
        <Text style={{fontSize:15, fontWeight:"bold",  marginVertical: 20, marginHorizontal: 30}}>
            Nombre:
        </Text>

        <Text style={{fontSize:15, fontWeight:"bold",  marginVertical: 20, marginHorizontal: 30}}>
            Email:
        </Text>

        <Text style={{fontSize:15, fontWeight:"bold",  marginVertical: 20, marginHorizontal: 30}}>
            Teléfono:
        </Text>
    
        <OpenURLButton 
        url={"https://docs.google.com/forms/d/e/1FAIpQLSe93-cuCFQ084AxVbzhwFJHjtPhrXFJ624ezAcqKU5qUsBqwg/viewform"}>
            Llenar formulario de voluntario
        </OpenURLButton>
        
    </View>
  );
};

export default MyComponent;