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


export default class Row extends React.Component{
	constructor(props) {
		super(props);
	}

	render() {
		let {
			children,
			selected,
			depth,
			...restProps
		} = this.props;

		console.log(depth);
		let styl = [styles.row];
		if(depth !== 2) styl.push(styles.rowStretch);
		if (selected) styl.push(styles.selected);
	  	return (
	    	<View {...restProps} style={styl}>
		    	{children}
		    </View>
	  	);
	}
}

const styles = StyleSheet.create({
	row: {
		// flex:1, // this stretches the rows to full Col Height
		alignItems: 'flex-start',
		flexDirection: 'row',
		overflow: 'hidden'
	},
	rowStretch: {
		flex: 1,
		alignItems: 'stretch'
	},
	selected: {
		// boxShadow: 'inset 0px 0px 1px 1px rgba(0,0,0,0.31)'
		shadowColor: "rgba(0,0,0,0.31)",
		shadowOffset: {
			width: 0,
			height: 4,
		},
		shadowOpacity: 0.30,
		shadowRadius: 4.65,

		elevation: 8
	}
});