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

import { TextInput } from 'react-native';


export default class ModuleBar {
	constructor(CS){
		this.CoreSystem = CS;
	}

	selectModule(mod, namespace) {
		this.selectedModule = mod;
		this.selectedModuleNamespace = namespace;
	}

	dragStart(ev, data) {
		ev.nativeEvent.dataTransfer.setData("MyObject", JSON.stringify(data));
	}



	render(){
		let list = this.CoreSystem.ModuleSystem.list();
		let Render = Object.keys(list).map((key, index) => {
			let items = Object.keys(list[key]).map((name,ind) => {
				
				let prop =  {
					style:ModPrev,
					text:"sdasdasd"
				}
				return (
				<View style={ModPrev.container}>
					
					<View style={ModPrev.NameCont}>
						<Text style={ModPrev.name}>{name}</Text>
						<Text style={ModPrev.modern}>Modern</Text>
					</View>

					<View style= {ModPrev.ContentCont} key={name} onClick={() => this.selectModule(list[key][name], key)}>
						<View style = {ModPrev.content}>
						<Text draggable={true} onDragStart={(ev) => this.dragStart(ev, {
							namespace: key,
							ctor: name
						})}>
							<View style={{minWidth: 50, minHeight:50, backgroundColor: 'rgba(0,0,0,0.2)'}}>
								{this.CoreSystem.ModuleSystem.createElementCtor(list[key][name])}
							</View>
						</Text>
						
						</View>
					</View>
				</View>)
			});
			return  <View key={key}>
						
						{items}
					</View>;
		})
		return Render;
	}
}





const ModPrev = StyleSheet.create({
	container:{
		marginBottom:34
		
		
	},
	NameCont:{
		flex:1,
		flexDirection:'row',
		justifyContent:"space-between"
	},
	name:{
		textAlign:'left',
		fontSize:14,
		color:'#707070',
		opacity:1,
		marginBottom:8,
		letterSpacing:0
	},
	modern:{
		color:'#707070',
		fontSize:10,
		letterSpacing:0.6,
		opacity:0.5,
		marginTop:5
	},
	ContentCont:{
		backgroundColor:'#F8F8F8',
		width:216,
		height:99,

	},
	content:{
		flex:1,
		alignItems: 'center',
		justifyContent:'center'
	}
})