import Tool from '../Systems/Tool';
import {View , Text , Button,StyleSheet} from 'react-native';
import React from 'react';
import { Icon } from 'react-native-elements'

import Library from 'trapilib/dist/lib';

let {
	CoreSystem,
	ViewSystem,
	ViewNode
} = Library; 


const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#d6d7da',
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text:{
  	flex:1,
  	backgroundColor:'red'
  }
});

const mStyle = StyleSheet.create({
	container:{
		flex:1,
		flexDirection:'row'
	}
})


export default class Select extends Tool{
	constructor(props){
		super(props)
		this.selectedNode = null;
	}

	editViewNode(CS,node){
		if(!node) return;
		
		
		if( this.selectedNode ) {
			this.selectedNode.props.selected = false;
			this.selectedNodeParent.props.selected = false;
		}

		node.props = {
			...node.props,
			selected: true
		}
		this.selectedNode = node;
		let viewName = CS.Routing.getCurrentView();
		let View = CS.ViewSystem.getView(viewName);
		this.selectedNodeParent = View.getParent(node);
		console.log(this.selectedNodeParent)
		this.selectedNodeParent.props = {
			...this.selectedNodeParent.props,
			selected: true
		}
		//	let EditNode = new ViewNode(Math.random(),"ViewComp",{text:"Manipulationg the dom",style:styles})	
		//VS.views[View].addViewNode(EditNode,node)
		//VS.views[View].replace(node,EditNode);	
	}

	render(){
		let selectStyle;
		if(this.active){
			selectStyle = {backgroundColor:"#a6a6a6"}
		}else{
			selectStyle = {backgroundColor:"#F1F1F1"}
		}
		
		return(
			<View>
				<Button 
					color="#f1f1f1"
					title={<Icon  name='sc-telegram'
	  				type='evilicon'
	  				color="#606060"
	  				containerStyle={selectStyle}
	  				/>}
	  				/>
			</View>
		)
	}
}

const UnSelectedCont = StyleSheet.create({
	container:{
		padding:0,
		borderWidth:1
	}
})