import React from "react";
import { View, ImageBackground } from "react-native";
import { Text, TextInput, Button, Divider, Checkbox } from "react-native-paper";
import i18n from "../i18nMessages.js";
import API from "../API";


let InviteView = ()=>{
    const [name, setName] = React.useState("");
    const [email, setEmail] = React.useState("");
    const [checked, setChecked] = React.useState("");

    let sendInvite = async () => {
        if(name != "" && email != "") return 0;
        setName('');
        setEmail('');
        setChecked(false);
        await API.newInvitation(name, email);
    }

    return (
        <View style={{
            padding: 10,
            height: "100%"
        }}>
            <ImageBackground source={require("../assets/Invite.png")} 
                style={{paddingTop:10, flex:1, opacity:1}} 
                imageStyle={{resizeMode:"contain", opacity: 0.05}}
            >
                <Text style={{marginBottom:10, fontSize:20}}>{i18n.t("message.invite")}</Text>
                <TextInput
                    label={i18n.t("message.name")}
                    style={{backgroundColor:"rgba(0,0,0,0)"}}
                    value={name}
                    onChangeText={text => setName(text)}
                />
                <TextInput
                    label={i18n.t("message.email")}
                    style={{backgroundColor:"rgba(0,0,0,0)"}}
                    value={email}
                    onChangeText={text => setEmail(text)}
                />
                <Checkbox.Item 
                    label={i18n.t("message.IKnowThisPerson")} 
                    status={checked ? "checked" : "unchecked"} 
                    onPress={()=>{setChecked(!checked)}}
                />
                <Divider />
                <Button mode="outlined">Invite</Button>
            </ImageBackground>
        </View>
    )
}

export default InviteView;