import * as React from 'react';
import { Alert, View, Linking} from 'react-native';
import { Button, Text, TextInput, Divider } from 'react-native-paper';
import { useState, useCallback } from "react";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import createAccount from './createAccount';
import Header from '../shared/header';



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

const submit = () => {
    console.log("write something")
}

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 Stack = createNativeStackNavigator();

const ProfileScreen = ({ route }) => {
  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: {route.params.userName}
        </Text>

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

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

const MyComponent = () => {

    return (
      <NavigationContainer independent="true">
        <Stack.Navigator>
        <Stack.Screen name="CreateAccountScreen" component={createAccount}  options={ ({navigation}) => {
          return {
            headerShown:false,
              headerTitle: () => <Header navigation={navigation}/>
          } }}/>
        <Stack.Screen name="Profile" component={ProfileScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
  
}
export default MyComponent;