import {View, Text} from "../../../components/Themed";
import {Pressable, StyleSheet} from "react-native";
import Colors from "../../../constants/Colors";
import { Button, Input, InputField, KeyboardAvoidingView } from "@gluestack-ui/themed";
import React, { useRef, useState } from "react";
import global from "../../../constants/global";
import { MaterialIcons } from "@expo/vector-icons";
import * as Linking from 'expo-linking'

export default function ContactScreen() {
    const [description, setDescription] = useState('');
    return (
        <View style={styles.container}>
            <View style={styles.content}>
                <Text style={styles.text}>
                    If you have any questions, concerns, or just want to say hi, feel free to hmu via email, socials, or this contact form.
                    {'\n\n'}
                    Email will probably get you the fastest response and this form will probably be the slowest.
                </Text>

                <Text style={styles.title}>Message</Text>

                <Input 
                    style={styles.textArea}
                    size='xl'
                    borderColor={Colors.dark.cyan}
                    $focus-borderColor={Colors.dark.redPastelClicked}
                >
                    <InputField 
                        style={styles.textAreainput}
                        placeholder="Your super cool message goes here"
                        value={description}
                        onChangeText={(text) => setDescription(text)}
                        maxLength={400}
                        multiline={true}
                        numberOfLines={10}
                        scrollEnabled={false}
                    />
                </Input>

                <Button 
                    style={styles.button}
                    size='xl'
                    bg={Colors.dark.redBright}
                    $active-bgColor={Colors.dark.redPastelClicked}
                    onPress={() => {
                        if(description.length < 5){
                            console.log("Message is too short");
                            return;
                        }

                        //TODO: Send message to backend
                        console.log("Message sent: ", description);
                    }}
                
                >
                    <Text style={styles.buttonText}>Send to the database!</Text>
                </Button>

                <Pressable
                    onPress={() => {
                        //Temp support email
                        Linking.openURL('mailto:noahvanfleet@gmail.com')
                    }}
                >
                    <MaterialIcons name="email" color={Colors.dark.redPastel} size={40} />
                </Pressable>
                <Text>Email</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    content:{
        flex:1,
        alignItems:'center',
    },
    title:{
        fontSize:24,
        fontWeight:'bold',
        color:Colors.dark.cyan,
        alignSelf:'flex-start',
        marginLeft:20,
    },
    text:{
        fontSize:17,
        color:Colors.dark.text,
        textAlign:'center',
        marginTop:10,
        paddingHorizontal:15,
    },
    textAreainput:{
        padding: 10,
        color: Colors.dark.text,
        textAlignVertical: 'top',
    },
    textArea:{
        width: global.width*0.9,
        height: 200,
        borderRadius: 10,
    },
    buttonText:{
        color: 'white',
        fontSize: 20,
    },
    button:{
        width: global.width*0.9,
        height: 60,
        borderRadius: 10,
        marginTop:global.height*0.02,
        marginBottom: global.height*0.02,
    },
})