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, ToolBox, phoneRef) {
    super()
		this.phoneRef = phoneRef;
		this.CoreSystem = CS;
    this.ToolBox = ToolBox;
	}

  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();  
  }

  selectRow(row) {
    this.ToolBox.selectNode(row);
    this.forceUpdate();
  }
  selectCol(col) {
    this.ToolBox.selectNode(col);
    this.forceUpdate();
  }

  rowHolders(Rows) {
    return Rows.map((row, index) => {
      let dom = '',
          ref = null;
      try {
        ref = this.CoreSystem.ModuleSystem.getRef(row.id);
        dom = ref.current._reactInternalFiber.child.child.stateNode;
      } catch(e) {}
      console.log("DOM", ref, dom,dom.clientHeight);
      return <View 
          style={[{height: dom.clientHeight}, styles.rowHolderContainer]} 
          onClick={(e) => this.selectRow(row)}>
          <View style={styles.rowHolder}>
            <Text style={styles.rowButton}>{index}</Text>
          </View>
      </View>;
    })
  }

  colHolders(Cols) {
    return Cols.map((col, index) => {
      let dom = '',
          ref = null;
      try {
        ref = this.CoreSystem.ModuleSystem.getRef(col.id);
        dom = ref.current._reactInternalFiber.child.child.stateNode;
      } catch(e) {}
      console.log("DOM", ref, dom,dom.clientHeight);
      return <View 
          style={[{width: dom.clientWidth}, styles.colHolderContainer]} 
          onClick={(e) => this.selectCol(col)}>
          <View style={styles.colHolder}>
            <Text style={styles.colButton}>{index}</Text>
          </View>
      </View>;
    })
  }

	render() {
		let CurrentView = this.CoreSystem.getCurrentView();
		let defaultContainer = CurrentView.getDefaultContainer();
		let Rows = CurrentView.getRows(defaultContainer);
    let Cols = [];
    // Check if selection is Row or Col and find ROW to getColumns
    if(this.ToolBox.selectedNode){
      let selectedRowNode = this.ToolBox.selectedNode.isRow ? 
      this.ToolBox.selectedNode : 
      CurrentView.getParent(this.ToolBox.selectedNode);
      Cols = CurrentView.getColumns(selectedRowNode);
    }

		return <View style={styles.container}>
          	<View style={styles.row}>
              <View style={styles.button}>
                <Button 
                color="#D2691E"
                onPress = {() => this.addRow()}
                title={
                  <Icon  name='add'
                    color="#606060"
                    containerStyle={{height:10}}
                  />}
                />
              </View>
            </View>
            <View style={[styles.row, styles.colHolders]}>
              {this.colHolders(Cols)}
            </View>
			      <View style={styles.row}>
	          	<View style={[styles.col, styles.rowHolders]}>
	          		{this.rowHolders(Rows)}
	          	</View>
	          	<div ref={this.phoneRef}>
	          		<View style={[styles.mobileView]}>
	         			  {this.CoreSystem.render()}
	         		  </View>
	          	</div>
	          </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',

  },
  rowHolders: {
    padding:4
  },
  colHolders: {
    padding:4,
    justifyContent: 'flex-end'
  },
  rowHolderContainer: {
    justifyContent: 'center'
  },
  colHolderContainer: {
    justifyContent: 'center'
  },
  rowHolder: {
    height: 50,
    width:100,
    backgroundColor: 'green',
    textAlign: 'center'
  },
  colHolder: {
    width:100,
    height: 50,
    backgroundColor: 'purple',
    textAlign: 'center'
  }
});