import { alignProperty } from '@mui/material/styles/cssUtils';
import React,{Component} from 'react';
import {View, Text, TextInput, Button, StyleSheet} from 'react-native';


export default class EventSearch extends Component
{
    constructor(props)
    {
        super(props);
        this.state={UID:'',acc_type:'',name:'',email:'',phone:''};
    }
    SearchEvent=()=>
    {
        var UID=this.state.UID;

        if(UID.length==0)
        {
            alert('Field is blank');
        }
        else
        { 
            var SearchAPIURL="https://ada.uprrp.edu/~pablo.puig1/TPMG/testusersearch.php";

            var header={
                    'Accept':'application/json',
                    'Content-Type':'application/json'
            };

            var Data={
                UID:UID
            };

            fetch(
                SearchAPIURL,
                {
                    method:'POST',
                    headers:header,
                    body: JSON.stringify(Data)
                }
            )
        
            .then((response)=>response.json())
            // .then(console.log(response))
            .then((response)=>
            {
                this.setState({UID:response[0].id});
                this.setState({acc_type:response[0].acc_type});
                this.setState({name:response[0].name});
                this.setState({email:response[0].email});
                this.setState({phone:response[0].phone});
            })
            .catch((error)=>
            {
                alert("Error: " + error);
            })
        }

    }
    render()
    {
        return(
            <View style={styles.viewSyle}>
                <TextInput
                    placeholder={"Enter UID"}
                    placeholderTextColor={"red"}
                    keyboardType={"numeric"}
                    style={styles.txtStyle}
                    onChangeText={UID=>this.setState({UID})}
                />
                <Button
                    title={"Find Event"}
                    onPress={this.SearchEvent}
                />
                <Text>{"\n\n"}</Text>
                <TextInput
                    style={styles.txtStyle}
                    value={this.state.UID}
                />

                <TextInput
                    style={styles.txtStyle}
                    value={this.state.acc_type}
                />

                <TextInput
                    style={styles.txtStyle}
                    value={this.state.name}
                />

                <TextInput
                    style={styles.txtStyle}
                    value={this.state.email}
                />

                <TextInput
                    style={styles.txtStyle}
                    value={this.state.phone}
                />

            </View>

        );
    }
}
const styles=StyleSheet.create({
    viewSyle:
    {
        flex:1,
        padding:1,
        marginTop:90
    
    },
    txtStyle:
    {
        borderBottomWidth:1,
        borderBottonColor:'red',
        marginBottom:20
    }

});