import React from 'react';
import Module from '../../lib/Module';
import { View , StyleSheet , Text} from 'react-native';
import Types from '../../lib/Types';

import BaseContainer from '../BaseContainer/index';
import ImageComp from '../Image/index';
import TextComp from '../Text/index';

import { ViewNode, Node } from '../../lib/systems/ViewSystem';


export default class BlogFeed extends Module{
	constructor(props){
		super(props)
		this.configure();
	}

	configure(){
		if(this.props.CoreSystem){
			let CurrentView = this.props.CoreSystem.getCurrentView();
		 	let node = CurrentView.getNode(this.props.NodeID)
		 	

		 	let NavContainer = NodeFactory({flexDirection:"row",justifyContent:"space-between",alignItems:'center'},'BaseContainer',{height:64,width:375,backgroundColor:'rgba(0, 84, 230, 1)'});
		 	let TitleWrapper = NodeFactory({flexDirection:"row",justifyContent:'center',alignItems:'center'},'BaseContainer',{height:41,width:327});
		 	let Title = NodeFactory({width:327},"Text",{fontSize:34,fontFamily:'bold',width:327,text:"Blog Feed"})
		 	let PostCont1 = NodeFactory({flexDirection:'column',justifyContent:'center',alignItems:'center'},'BaseContainer',{height:236,width:327});
		 	let PostCont2 = NodeFactory({flexDirection:'column',justifyContent:'center',alignItems:'center'},'BaseContainer',{height:236,width:327});

		 	//NavContainer Inputs
		 	let navIcon = NodeFactory({},'Icon',{name:"reorder",color:'rgba(255, 255, 255, 1)'})
		 	let navTitle = NodeFactory({},'Text',{text:"XDi",color:'rgba(255, 255, 255, 1)',fontSize:25})
		 	let navProfile =  NodeFactory({},'Icon',{name:"perm-identity",color:'rgba(255, 255, 255, 1)'})
		 	//let Image1 = new Node("SS"+ Math.random(), {},new ViewNode("S"+Math.random(), "Image"))

		 	//PostCont 1 Inputs
		 	let image1 =  NodeFactory({},'Image',{height:142,width:327});
		 	

		 	let wrapper1 = NodeFactory({},'BaseContainer',{height:91,width:327});

		 	let title1 =  NodeFactory({},'Text',{text:"This is a titile ",fontFamily:"roboto-black",fontSize:18,color:"rgba(112, 112, 112, 1)"})
		 	let subtitle1 = NodeFactory({},'Text',{text:"This is a subtitle",fontFamily:"roboto-black",fontSize:14,color:"rgba(193, 193, 193, 1)"})
		 	//Text for now will be converted to date Picker
		 	let date1 =  NodeFactory({alignSelf:'flex-end'},'Text',{text:"OCTOBER 9, 2019",fontFamily:"roboto-black",fontSize:10,color:"rgba(112, 112, 112, 1)"})



		 	//Post Cont 2 Inputs
		 	let image2 =  NodeFactory({},'Image',{height:142,width:327});
		 	
		 	let wrapper2 = NodeFactory({},'BaseContainer',{height:91,width:327});

		 	let title2 = NodeFactory({},'Text',{text:"Thi is a title ",fontFamily:"roboto-black",fontSize:18,color:"rgba(112, 112, 112, 1)"}) 
		 	let subtitle2 = NodeFactory({},'Text',{text:"This is a subtitle ",fontFamily:"roboto-black",fontSize:14,color:"rgba(193, 193, 193, 1)"})
		 	//Text for now will be converted to date Picker
		 	let date2 =  NodeFactory({alignSelf:'flex-end'},'Text',{text:"OCTOBER 9, 2019",fontFamily:"roboto-black",fontSize:10,color:"rgba(112, 112, 112, 1)"})

		 	//adding Containers
		 	if(!CurrentView.has(NavContainer)) CurrentView.addViewNode(NavContainer,node)
		 	if(!CurrentView.has(TitleWrapper)) CurrentView.addViewNode(TitleWrapper,node)
		 	if(!CurrentView.has(Title)) CurrentView.addViewNode(Title,TitleWrapper)
		 	if(!CurrentView.has(PostCont1)) CurrentView.addViewNode(PostCont1,node)
		 	if(!CurrentView.has(PostCont2)) {
		 		CurrentView.addViewNode(PostCont2,node)
		 		
		 	}

			//adding Children To NavContainer
		
		 	if(!CurrentView.has(navIcon))  CurrentView.addViewNode(navIcon,NavContainer)
		 	if(!CurrentView.has(navTitle))  CurrentView.addViewNode(navTitle,NavContainer)
		 	if(!CurrentView.has(navProfile))  CurrentView.addViewNode(navProfile,NavContainer)
		 		

		 	// --------------------- This is the end of Top Nav -------------

		 	// Start of Blog posts PostCont1
		 	if(!CurrentView.has(image1)) CurrentView.addViewNode(image1,PostCont1)
		 	if(!CurrentView.has(wrapper1)) CurrentView.addViewNode(wrapper1,PostCont1)
		 	if(!CurrentView.has(title1)) CurrentView.addViewNode(title1,wrapper1)
		 	if(!CurrentView.has(subtitle1)) CurrentView.addViewNode(subtitle1,wrapper1)
		 	if(!CurrentView.has(date1)) CurrentView.addViewNode(date1,wrapper1)

		 	//post Cont 2
		 	if(!CurrentView.has(image2)) CurrentView.addViewNode(image2,PostCont2)
		 	if(!CurrentView.has(wrapper2)) CurrentView.addViewNode(wrapper2,PostCont2)
		 	if(!CurrentView.has(title2)) CurrentView.addViewNode(title2,wrapper2)
		 	if(!CurrentView.has(subtitle2)) CurrentView.addViewNode(subtitle2,wrapper2)
		 	if(!CurrentView.has(date2)){ 
		 		CurrentView.addViewNode(date2,PostCont2)
		 		this.props.CoreSystem.forceUpdate();
		 	}


		}
	}

	render(){
		return(

			<View>
				
			</View>
			)
	}	
}

BlogFeed.Inputs = {
	
}

var NodeFactory = function(containerStyle = {}, component, componentStyle = {}){
	return new Node("SS"+ Math.random(), containerStyle,new ViewNode("S"+Math.random(), component, componentStyle));
}