import React from 'react';
import Module from '../lib/Module';
import {StyleSheet ,TextInput, View, Text } from 'react-native';

export default class TextComp extends Module {
	constructor(props) {
		super(props);
		this.state = {
			text: props.text || ""
		}
	}

	display() {
		let { container , text } = this.props.style || ""
		let {
			color,
			fontSize
		} = this.props;
		return 	(
				<View style={container  || defaultStyle.container}>
					<TextInput  
						style={{...(text || defaultStyle.text), color, fontSize}} 
						onChangeText={(text) => this.setState({
							text
						})}
        				value={this.state.text || 'Default Text'}/>
						
						{this.props.children}
					
				</View>)
	}
}



const defaultStyle = StyleSheet.create({
	container:{
		//border: 0.5px solid #E4E4E4;
		
		borderWidth:0.5,
		borderColor:'#E4E4E4',
		backgroundColor:'#FFFFFF'
	},
	text:{
		color:'#707070',
		textAlign:'center',
		font:8,
		opacity:0.8
		/*
	text-align: left;
font: Compact Thin 8px/10px SF Display;
letter-spacing: 0;
color: #707070;
opacity: 0.3;

		*/
	}
})
TextComp.Inputs = {
	color: new Types.Text(),
	fontSize: new Types.Integer().default(22)
}