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={EID:'',Name:'',Sdate:'',Edate:'',Pcount:'',Plimit:'',Description:''};
    }
    SearchEvent=()=>
    {
        var EID=this.state.EID;

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

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

            var Data={
                EID:EID
            };

            fetch(
                SearchAPIURL,
                {
                    method:'POST',
                    headers:header,
                    body: JSON.stringify(Data)
                }
            )
            .then((response)=>response.json())
            .then((response)=>
            {
                this.setState({EID:response[0].EID});
                this.setState({Name:response[0].Name});
                this.setState({Sdate:response[0].Sdate});
                this.setState({Edate:response[0].Edate});
                this.setState({Pcount:response[0].Pcount});
                this.setState({Plimit:response[0].Plimit});
                this.setState({Description:response[0].Description});
            })
            .catch((error)=>
            {
                alert("Error: " + error);
            })
        }

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

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

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

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

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

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

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

            </View>

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

});