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

export default function ArrayEditor(props) {
	let [array, setArray] = useState(props.value || []);
	let [template, setTemplate] = useState(props.template || {});
	let Handler = TypeHandler(template);
	return (
			<View style={styles.container}>
				<View style={styles.row}>
					<Text style={styles.capFirst}>{props.title}</Text>
					<View>
						<Icon name={'plus-one'} 
							// type = {}
							// color = {}
							onPress = {() => {
								array.push(null);
								setArray(array);
								props.onChange && props.onChange(array);
							}}/>
					</View>
				</View>
				{array.map((item, index) => {
					let editorProps = {
						title: undefined,
						onChange: (value) => {
							array[index] = value;
							setArray(array);
							props.onChange && props.onChange(array);
						},
						value: array[index]
					};
					return <View style={styles.item}>
						<View style={styles.row}>
							<Text style={styles.itemIndex}># {index}</Text>
							<Icon name={'delete-forever'} 
								// type = {}
								// color = {}
								onPress = {() => {
									array.splice(index,1);
									setArray(array);
									props.onChange && props.onChange(array);
								}}/>
						</View>
						<Handler {...editorProps} key={array.length * 100 + index} />
					</View>
				})}
			</View>
		);
}

const styles = StyleSheet.create({
	container:{
		flexDirection: 'column'
	},
	row: {
		flexDirection: 'row',
		alignItems: 'baseline',
		justifyContent: 'space-between',
	},
	capFirst: {
		fontSize: 14, 
		fontFamily: 'roboto-light',
		textTransform: 'capitalize'
	},
	defaultInput: {
		marginTop:6,
		borderWidth:1,
		backgroundColor: 'white',
		boxShadow: '0px 3px 6px #00000029',
		borderColor: '#FFFFFF66',
		borderRadius: 14
	},
	item: {
		paddingLeft: 8,
		borderLeftWidth: 1,
		borderColor: '#cecece',
		marginBottom: 4,
		marginTop: 4
	},
	itemIndex: {
		fontSize: 12,
		opacity: 0.4
	}
})