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";

const validateEmail = (text) => {
    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;
    if (reg.test(text) === false) {
      console.log("Email is Not Correct");
      return false;
    }
    return true;
  }


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

    let sendInvite = async () => {
        if(name == "" || email == "" || !checked){
            alert("Please make sure to fill all the inputs");
            return 0;
        }
        if(!validateEmail(email)){
            alert("Please input a valid email");
            return 0;
        }
        const response = await API.newInvitation(name, email);
        if(response?.status !== "ok"){
            alert(response.status);
            return 0;
        }
        //console.log(response);
        setName('');
        setEmail('');
        setChecked(false);
        alert("Invitation sent, thank you!");
    }

    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)}
                    autoCapitalize='none'
                    autoComplete='email'
                    autoCorrect={false}
                    keyboardType='email-address'
                />
                <Checkbox.Item 
                    label={i18n.t("message.IKnowThisPerson")} 
                    status={checked ? "checked" : "unchecked"} 
                    onPress={()=>{setChecked(!checked)}}
                />
                <Divider />
                <Button mode="outlined" onPress={sendInvite}>
                    {i18n.t("message.invite")}
                </Button>
            </ImageBackground>
        </View>
    )
}

export default InviteView;