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

import Types from '../lib/Types';



export default class FormComp extends Module {
	constructor(props) {
		super(props);
		this.state = {
		}
		this.submit = this.submit.bind(this)
	}
	submit(e){
		e.preventDefault()
		return this.state
	}	
	display() {
		let {
			inputsNum,
			ButtonText,
			ButtonColor,
			container
		} = this.props
		if(!inputsNum) inputsNum = 2;
		let Inputs = [];
		for(let i = 0; i<inputsNum; i++){
			let key = i+1;
			let state = {};
			let input =  <TextInput key={i}
				        style={{height: 20, borderColor: 'gray', borderWidth: 1 , marginBottom:5}}
				        onChangeText={(text) => {
				        	state[key] = text;
				        	this.setState(state)}}
				        value={this.state.key}
				        placeholder={'placeholder'}
				      />
			Inputs.push(input);
		}
		let fn = this.props.submit || this.submit
		return 	(
				<View style={{backgroundColor:"#f7e6ff",width:250,height:100,padding:10}}>
					{Inputs}
			        <Button
				    onPress = {(e) => fn(e)}
				    title={this.props.title || "Submit"}
				    color={this.props.ButtonColor ||  "#008CBA"}
					accessibilityLabel="Learn more about this purple button"
					/>
				</View>)
	}
}



FormComp.Inputs = {
	inputsNum: new Types.Integer().require().default(2),
	ButtonText:new Types.Text().require().default('Submit'),
	ButtonColor: new Types.Text().require().color().default('#008CBA')
}