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

import { TextInput } from 'react-native';

import BaseSystem from './System'

export default class ModuleBar extends BaseSystem {
	constructor(CS){
		super();
		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={ModPrev.previewContainer}>
									{/*this.CoreSystem.ModuleSystem.createElementCtor(list[key][name])*/}
								</View>
							</Text>
						</View>
					</View>
				</View>)
			});
			return  <View key={key}>
						<View style={ModPrev.Namespace} onClick={() => {
							this.visibleNamespace ?
							this.visibleNamespace = null : 
							this.visibleNamespace = key; 
							this.forceUpdate();
						}}>
							<Text style={ModPrev.NamespaceName}>{key}</Text>
						</View>
						{this.visibleNamespace === key ? items : null}
					</View>;
		})
		return Render;
	}
}





const ModPrev = StyleSheet.create({
	container:{
		paddingTop: 15,
		marginBottom:34,
		width:219
	},
	previewContainer: {
		minWidth: 50,
		minHeight:40,
		backgroundColor: 'rgba(255,255,255,0.1)',
		borderWidth: 1,
		borderColor: 'rgba(0,0,0,0.1)',
		shadowColor: "rgba(0,0,0,0.81)",
		shadowOffset: {
			width: 0,
			height: 1
		},
		shadowOpacity: 0.30,
		shadowRadius: 4.65,
		elevation: 3,
		cursor: 'pointer'
	},
	NameCont:{
		flex:1,
		flexDirection:'row',
		justifyContent:"space-between"
	},
	Namespace: {
		cursor: 'pointer'
	},
	NamespaceName: {
		fontWeight: 'bold'
	},
	name:{
		textAlign:'left',
		fontSize:12,
		color:'#707070',
		opacity:0.8,
		marginBottom:8,
		letterSpacing:0,
		fontFamily: 'thin'
	},
	modern:{
		color:'#707070',
		fontSize:7,
		letterSpacing:0.6,
		opacity:0.5,
		marginTop:5,
		textTransform: 'uppercase',
		fontFamily: 'thin'
	},
	ContentCont:{
		backgroundColor:'#F8F8F8',
		width:216,
		padding: 10
	},
	content:{
		flex:1,
		alignItems: 'center',
		justifyContent:'center'
	}
})