import {View, Text} from "../../../components/Themed";
import {Linking, Pressable, StyleSheet} from "react-native";
import Colors from "../../../constants/Colors";
import { Ionicons } from "@expo/vector-icons";
import { Image } from "react-native";
import Svg, { Path, Rect } from "react-native-svg";
import global from "../../../constants/global";
import { openURL } from "expo-linking";

export default function DonationsScreen() {
    let cashapp = "https://cash.me/$noahvanfleet2/5.00/";
    let venmo = "https://venmo.com/?txn=pay&audience=friends&recipients=noahvanfleet&note=Thank%20you%20for%20helping%20Sherlock%20run%20%F0%9F%A5%BA"
    return (
        <View style={styles.container}>
            <View style={styles.content}>
                <Text style={styles.title}>Help me out</Text>
                <Text style={styles.text}>
                    Sherlock can get pricey to host and maintain, especially when 
                    those google geocoding calls rack up.
                    {'\n\n'}I plan on staying ad free, so any 
                    help is much appreciated. Save my wallet pls🙏
                </Text>

                <View style={styles.pay}>
                    <View style={styles.div}>
                        <Pressable
                            onPress={()=>{
                                Linking.canOpenURL(venmo).then(supported =>{
                                    if(supported){
                                        Linking.openURL(venmo)
                                    }else{
                                        console.log("Can't open venmo url.")
                                        Linking.openURL(venmo);
                                    }
                                })
                            }}
                        >
                            <Ionicons size={60} color={'#008CFF'} name="logo-venmo"/>
                        </Pressable>
                        <Text>Venmo</Text>
                    </View>
                    
                    <View style={styles.div}>
                        <Pressable 
                            onPress={()=>{
                                Linking.canOpenURL(cashapp).then(supported=>{
                                    if(supported){
                                        Linking.openURL(cashapp)
                                    }else{
                                        Linking.openURL(cashapp);
                                        console.log("Can't open cashapp url.")
                                    }
                                })
                            }}
                            >
                            <Svg
                                // @ts-ignore
                                xmlns="http://www.w3.org/2000/svg"
                                xmlSpace="preserve"
                                fill="none"
                                style={styles.icons}
                                viewBox="0 0 210 210"
                                // {...props}
                                >
                                <Rect width={150} height={150} x={25} y={25} fill="#fff" rx={7.814} />
                                <Path
                                    fill="#00e013"
                                    fillRule="evenodd"
                                    d="M206.398 30.286a44.634 44.634 0 0 0-26.713-26.687C168.48 0 158.075 0 136.865 0h-63.63c-21.11 0-31.615 0-42.92 3.498A44.636 44.636 0 0 0 3.602 30.186C0 41.58 0 52.075 0 73.165v63.57c0 21.19 0 31.585 3.502 42.98a44.634 44.634 0 0 0 26.713 26.687C41.62 210 52.125 210 73.135 210h63.63c21.11 0 31.615 0 42.92-3.598a44.634 44.634 0 0 0 26.713-26.687C210 168.32 210 157.825 210 136.735v-63.47c0-21.09 0-31.585-3.602-42.979zm-54.926 41.58-12.106 9.895c-1.101.9-2.601.7-3.402-.4-6.203-7.596-15.807-11.894-26.312-11.894-11.706 0-19.009 5.098-19.009 12.294-.2 6.097 5.503 9.196 23.011 12.994 22.111 4.698 32.215 13.893 32.215 29.386 0 19.391-15.808 33.684-40.519 35.283l-2.401 11.495c-.2 1.099-1.201 1.899-2.401 1.899H81.539c-1.601 0-2.701-1.499-2.401-2.999l3.001-12.794c-12.206-3.498-22.111-10.295-27.813-18.591-.7-1.099-.5-2.499.5-3.298l13.206-10.395c1.101-.9 2.701-.6 3.502.5 7.003 9.795 17.808 15.593 30.815 15.593 11.706 0 20.51-5.697 20.51-13.893 0-6.297-4.402-9.196-19.309-12.294-25.412-5.497-35.517-14.793-35.517-30.286 0-17.991 15.107-31.485 37.918-33.284l2.501-11.894c.2-1.099 1.201-1.899 2.401-1.899h18.709c1.501 0 2.701 1.399 2.401 2.899l-2.901 13.294c9.805 2.999 17.808 8.396 22.811 15.093.8.997.6 2.496-.401 3.296z"
                                    clipRule="evenodd"
                                    />
                            </Svg>

                        </Pressable>
                        <Text>Cash app</Text>
                    </View>

                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    content: {
        flex: 1,
        // alignItems: 'center',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        color: Colors.dark.cyan,
        marginLeft: 10,
        paddingHorizontal: 5,
    },
    text:{
        marginLeft:10,
        fontSize:17,
        paddingHorizontal:5
    },
    icons:{
        width:global.width*0.15,
        height:global.width*0.15
    },
    pay:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        columnGap:20,
        marginTop:20
    },
    div:{
        alignItems:'center'
    }
})