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

export default function ActionEditor(props) {
	let [action, setAction] = useState(props.action || {});
	if(!action.data || typeof action.data !== "object") action.data = {};
	return (
			<View style={styles.container}>
				<View style={styles.row}>
					<Text style={[styles.title, styles.capFirst]}>Type</Text>
					<TextInput style={styles.defaultInput} 
						onChangeText={(text) => {
							action.type = text;
							props.onChange && props.onChange(action);
							setAction(action);
						}}
	    				value={action.type}/>
	    		</View>
	    		<View style={styles.row}>
					<Text style={[styles.title, styles.capFirst]}>Data</Text>
					<TextInput style={styles.defaultInput} 
						onChangeText={(text) => {
							action.data.route = text;
							props.onChange && props.onChange(action);
							setAction(action);
						}}
	    				value={action.data.route}/>
	    		</View>
			</View>
		);
}

const styles = StyleSheet.create({
	container:{
		padding:24,
		paddingTop: 0,
		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
	},
	title: {

	}
})