import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

export default class Environment {

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

	render() {
		let CurrentView = this.CoreSystem.getCurrentView();
		let defaultContainer = CurrentView.getDefaultContainer();
		let Rows = CurrentView.getRows(defaultContainer);
		return <View style={styles.container}>
          	<View style={styles.row}>
	          		<Text>Row</Text>

          	</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}>
	          		<Text>row</Text>

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