import React, {useState } from 'react';
import {
	StatusBar,
	StyleSheet,
	Text,
	useColorScheme,
	View,
	TouchableHighlight,
	TextInput
} from 'react-native';
import { Icon } from 'react-native-elements';


const RegisterUserScreen = () => {

	const [username, setUsername] = useState("")
	const [orgname, setOrgname] = useState("")
	const [token, setToken] = useState("none")
	 var [ isPress, setIsPress ] = useState(false);

	const register = () => {
	var data = {
	   "username": username,
	   "orgName":  orgname
	}
	fetch("http://192.168.29.141:4000/users", {
		method: "POST",
		headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
		body: JSON.stringify(data)
	})
	.then(function (response) {
		return response.json();
	})
	.then(function (data) {
		console.log(data)
		setToken(data)
	});

}

	var touchProps = {

		activeOpacity: 1,
		underlayColor: 'white',
		style: isPress ? styles.btnPress : styles.btnNormal,
		onHideUnderlay: () => setIsPress(false),
		onShowUnderlay: () => setIsPress(true),
		onPress: register,
  	}

	var textInputProps = {
        style:styles.input,
	onChangeText:setUsername,
        value:username,
	placeholder:"username",
	placeholderTextColor : "#4b4a4a",

	}
	return (

		<>
		<StatusBar backgroundColor="#fffff2" barStyle="dark-content" />
		<View
		style={styles.viewRoot}>
		<Text style={styles.heading}>Log In</Text>
		<View style={{ flexDirection: "row", marginTop: "20%"}}>
		<TextInput {...textInputProps} />
		</View>
		<View style={{ flexDirection: "row", marginTop: "10%"}}>
		<TextInput {...textInputProps} />
		</View>

		<View style={{ flexDirection: "row", marginTop: "10%", justifyContent: "center"}}>
			<TouchableHighlight {...touchProps}>
			<Text style={styles.btnText}>Submit</Text>
			</TouchableHighlight>
		</View>

		<Text style={{color: "#206ba5", fontSize: 25 }}>{token.message}</Text>
		</View>

		</>
	);
}

const styles = StyleSheet.create({
	viewRoot: {
		backgroundColor: '#ffffff',
		height: '100%',
		justifyContent: 'center',
		alignItems: 'center'
	},
	heading: {
		color: '#1C254E',
		fontSize: 60,
		textAlign: 'center',
		fontFamily: 'Ubuntu-Bold',
	},
	icon: {

		alignSelf: "flex-start",
		marginLeft: '28%',
		flexDirection: 'row',
	},
	btnNormal: {
    borderRadius: 10,
    height: 45,
    width: 140,
    backgroundColor: '#1C254E',
    alignItems: 'center',
    justifyContent: 'center',
  },
	btnText: {
		textAlign: 'center',
		fontSize: 22,
    		color:'white',
  },
  btnPress: {
    borderRadius: 10,
    height: 45,
    width: 140,
    backgroundColor: '#1C254E',
    justifyContent: 'center',
	},
  input: {
    height: 60,
    width: 280,
    margin: 12,
    borderRadius: 15,
    padding: 10,
    color: "black",
    backgroundColor: "#c4c4c4",
  },
});

export default RegisterUserScreen;