import React from 'react';

import { Button , View, Text, StyleSheet } from 'react-native';
import {Icon} from 'react-native-elements';
import BaseSystem from './System';


export default class Environment extends BaseSystem{


	constructor(CS, phoneRef) {
    super()
		this.phoneRef = phoneRef;
		this.CoreSystem = CS;
	}

  addRow(){
    let View = this.CoreSystem.getCurrentView();
    let container = View.getDefaultContainer();
    let rows = View.getRows(container);
    View.setRows(container,rows.length + 1)
    rows = View.getRows(container)
    View.setColumns(rows[rows.length-1],1)
    rows[rows.length-1].props.selected = true;
    this.forceUpdate();  
  }


	render() {
		let CurrentView = this.CoreSystem.getCurrentView();
		let defaultContainer = CurrentView.getDefaultContainer();
		let Rows = CurrentView.getRows(defaultContainer);
		return <View style={styles.container}>
          	<View style={[styles.row,styles.button]}>
	          		<Button 
                color="#D2691E"
                onPress = {() => this.addRow()}
                title={
                  <Icon  name='add'
                    color="#606060"
                    containerStyle={{height:10}}
                  />}
                />
          	</View>
			     <View style={styles.row}>
	          	<View style={styles.col}>
	          		<Text>Colasdasdasdasdasd</Text>
	          		{Rows.map((row) => {
	          			return <Text>Row : {row.id}</Text>
	          		})}
	          	</View>
	          	<div ref={this.phoneRef}>
	          		<View style={[styles.mobileView]}>
	         			{this.CoreSystem.render()}
	         		</View>
	          	</div>
	          	<View style={styles.col}>
	          		<Text>Col</Text>
	          	</View>
	        </View>
          	<View style={[styles.row,styles.button]}>
	          	<Button 
              color="#D2691E"
              onPress={() => this.addRow()}
              title={
                <Icon  name='add'
                  color="#606060"
                  containerStyle={{height:10}}
                />}
              />

          	</View>
		</View>
	}
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column"
  },
  mobileView: {
    backgroundColor: 'white',
    borderWidth: 4,
    borderColor: 'orange',
    flex:1,
    alignSelf: 'stretch',
    // iphone X
    width:1125/3,
    height: 2436/3 
  },

  row: {
  	flexDirection: "row",
  	borderWidth: 1
  },
  col: {
  	flexDirection: "column",
  	borderWidth: 1
  },
  button:{
    flex:1,
    justifyContent:'center',

  }
});