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(VS,node){
		if(!node || !node.id){
			let unselect = StyleSheet.create({
				container:{
					padding:0,
					borderWidth:0
				}
			})
			if(this.selectedNode && this.selectedNode.props)
				this.selectedNode.props.style.container = unselect.container;
			this.selectedNode = null;
			return;
		}
		this.selectedNode = node;
		let style = StyleSheet.create({
			container:{
				padding:5,
				borderWidth:2
			}
		})
		node.props.style.container = style.container
		//	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(){
		return(
			<View styles={mStyle.container}>
				<Button title={<Icon  name='sc-telegram'
	  				type='evilicon'
	  				color="#606060"/>}/>
			</View>
		)
	}
}

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