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

export default function TextEditor(props) {
	let [text, setText] = useState(props.text || '');
	let title = props.title || "Input";
	return (
			<View style={styles.container}>
				<Text style={[styles.title, styles.capFirst]}>{title}</Text>
				<TextInput style={styles.defaultInput} 
					onChangeText={(text) => {
						props.onChange && props.onChange(text);
						setText(text);
					}}
    				value={text}/>
			</View>
		);
}

const styles = StyleSheet.create({
	container:{
		padding:24,
		paddingTop: 0,
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'baseline'
	},
	capFirst: {
		fontSize: 14, 
		fontFamily: 'roboto-light',
		textTransform: 'capitalize'
	},
	defaultInput: {
		marginTop:6,
		borderWidth:1,
		backgroundColor: 'white',
		boxShadow: '0px 3px 6px #00000029',
		borderColor: '#FFFFFF66',
		borderRadius: 14
	},
	title: {

	}
})

/*

<View style={SideBarStyle.body}>
					<Text>{key}</Text>
					<TextInput
			        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
			        onChangeText={(text) => this.editNode(text, key, Structure[key])}
			        value={this.viewNode.props[key]}
			        keyboardType={Structure[key].constructor.name === 'Interger' ? 'numeric':null}
			     	 />
						
				</View>

*/