import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import Library from 'trapilib/dist/lib';
import { TextInput } from 'react-native';
let {
	CoreSystem,
	ViewSystem,
	ViewNode
} = Library; 

export default class SideBar{
	constructor(CoreSystem){
		this.CoreSystem = CoreSystem;
	}

	onUpdate(fn){
		this.__onUpdate = fn
	}

	forceUpdate(props){
    	this.__onUpdate && this.__onUpdate(props);
  	}	

  	switchTools(toolName){
  		//will be a switch function
  	}
  	someFunction(){

  	}
  	getStyle(style) {
          if (typeof style === 'number') {
            return ReactNativePropRegistry.getByID(style);
          }
          return style;
     }


    editNode(text,key){
    	console.log(text,key);
    	this.viewNode.props[key] = text;
    	this.forceUpdate();
    }
    //TODO Change everything :P
	render(){
		let tool = this.tool;
		let ModuleSystem = this.CoreSystem.ModuleSystem;
		let Structure = {};
		if(tool){
			if(tool.selectedNode && tool.selectedNode.content && tool.selectedNode.content.value){
				this.viewNode = tool.selectedNode.content;
				// give ViewNode
				Structure = ModuleSystem.fromViewNode(this.viewNode).Inputs;
				console.log(Structure);
			}	
		}
		let data = Object.keys(Structure || {}).map((key) => {
			return(
				<View style={SideBarStyle.body}>
					<Text>{key}</Text>
					{key === 'text' ? (
							<TextInput
					        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
					        onChangeText={(text) => this.editNode(text, key)}
					        value={this.viewNode.props[key]}
					     	 />
						):(null)}
				</View>
			)

		})
		return (
  			<View style={SideBarStyle}>
  				<Text style={SideBarStyle.title}>Side Bar</Text>
  			 	{data}
  			</View>
  			)
	}
}




const SelectedStyle = StyleSheet.create({
	container:{
		padding:5,
		borderWidth:2,
		borderColor:'green'
	}
})



const SideBarStyle = StyleSheet.create({
	container:{
		padding:1,
		flex:1,
		flexDirection:'row'
	},
	title:{
		fontSize:20,
		textAlign:'center',
		fontFamily:'halvetica',
		color:'black',
		borderBottomWidth:1,
		borderBottomColor:'black'
	},
	body:{
		paddingLeft:5,
		paddingRight:5
	}
})