import React, {Fragment} from 'react';
import { View } from 'react-native';
import Types from './Types';
import { Resolver } from './Types';
import Injection from './systems/InjectionSystem';

// EventSystem

export default class Module extends React.Component{

	constructor(props) {
		super(props);

		this.Core = Injection.inject('Core');
		this.Modules = Injection.inject('Modules');


		let {
			ModuleID,
			EventSystem
		} = props;
		let eventName = ModuleID + "HitCheck"
		EventSystem && EventSystem.on(eventName, ({x,y}) => {
			return true;
		});
		this.isTemplate = false
		//console.log("GEN EV: " , eventName, EventSystem);
		this._containerStyle = {
			marginLeft: 24,
			marginRight: 24
		}
		this.counter = 0;
	}

	getId() {
		return this.props.ModuleID;
	}

	renderModule(ctor, namespace = "default", props = {}) {
		let VS = this.props.CoreSystem.ViewSystem;
		if(!this.props.CoreSystem.ModuleSystem.get(ctor, namespace)) return null;
		return VS.renderModule({
          	value: ctor,
          	namespace,
          	props
        }, this.getId() +"C"+ (this.counter++));
	}

	createAction(action) {
		if(!this.props.CoreSystem) {
			console.warn("This module was constructed without a CoreSystem");
			return;
		}
		return this.props.CoreSystem.ActionSystem.createAction(action);
	}

	setContainerStyle(style) { 
		this._containerStyle = style;
	}

	display() {
		throw new Error("You must extend this base Module and override display method!");
	}

	module(mod, props) {
		return mod ? 
		this.renderModule(mod.value, mod.namespace, props) : null;
	}
	moduleArray(modules, props) {
		return modules ? modules.map((mod) => this.module(mod,props)) : null;
	}
	render() {
		this.counter = 10100;
		return <View ModuleID={this.props.ModuleID} style={[{overflow:'hidden'}]} MY_WRAPPER_FROM_BASE_MODULE={true}>
			{this.display()}
		</View>
		// throw new Error("You must extend this base Module and override render method!");
	}

	getProps() {
		return Resolver(this.constructor.Inputs, this.props);
	}

	static getDerivedStateFromProps(props) {
		let styleProps = {};
		let restProps = {};
		for(var i in props) {
			if(StyleProps[i]) {
				styleProps[i] = props[i];
			} else {
				restProps[i] = props[i];
			}
		}
		return {
			styleProps,
			restProps
		}
	}
}

const StyleProps = {
	"fontSize":1,
	"fontFamily":1,
	"fontWeight":1,
	"letterSpacing":1,


	"animationDelay":1,
	"animationDirection":1,
	"animationDuration":1,
	"animationFillMode":1,
	"animationIterationCount":1,
	"animationKeyframes":1,
	"animationPlayState":1,
	"animationTimingFunction":1,
	"transitionDelay":1,
	"transitionDuration":1,
	"transitionProperty":1,
	"transitionTimingFunction":1,
	"borderColor":1,
	"borderBottomColor":1,
	"borderEndColor":1,
	"borderLeftColor":1,
	"borderRightColor":1,
	"borderStartColor":1,
	"borderTopColor":1,
	"borderRadius":1,
	"borderBottomEndRadius":1,
	"borderBottomLeftRadius":1,
	"borderBottomRightRadius":1,
	"borderBottomStartRadius":1,
	"borderTopEndRadius":1,
	"borderTopLeftRadius":1,
	"borderTopRightRadius":1,
	"borderTopStartRadius":1,
	"borderStyle":1,
	"borderBottomStyle":1,
	"borderEndStyle":1,
	"borderLeftStyle":1,
	"borderRightStyle":1,
	"borderStartStyle":1,
	"borderTopStyle":1,
	"cursor":1,
	"touchAction":1,
	"userSelect":1,
	"willChange":1,
	"alignContent":1,
	"alignItems":1,
	"alignSelf":1,
	"backfaceVisibility":1,
	"borderWidth":1,
	"borderBottomWidth":1,
	"borderEndWidth":1,
	"borderLeftWidth":1,
	"borderRightWidth":1,
	"borderStartWidth":1,
	"borderTopWidth":1,
	"bottom":1,
	"boxSizing":1,
	"direction":1,
	"display":1,
	"end":1,
	"flex":1,
	"flexBasis":1,
	"flexDirection":1,
	"flexGrow":1,
	"flexShrink":1,
	"flexWrap":1,
	"height":1,
	"justifyContent":1,
	"left":1,
	"margin":1,
	"marginBottom":1,
	"marginHorizontal":1,
	"marginEnd":1,
	"marginLeft":1,
	"marginRight":1,
	"marginStart":1,
	"marginTop":1,
	"marginVertical":1,
	"maxHeight":1,
	"maxWidth":1,
	"minHeight":1,
	"minWidth":1,
	"order":1,
	"overflow":1,
	"overflowX":1,
	"overflowY":1,
	"padding":1,
	"paddingBottom":1,
	"paddingHorizontal":1,
	"paddingEnd":1,
	"paddingLeft":1,
	"paddingRight":1,
	"paddingStart":1,
	"paddingTop":1,
	"paddingVertical":1,
	"position":1,
	"right":1,
	"start":1,
	"top":1,
	"visibility":1,
	"width":1,
	"zIndex":1,
	"aspectRatio":1,
	"gridAutoColumns":1,
	"gridAutoFlow":1,
	"gridAutoRows":1,
	"gridColumnEnd":1,
	"gridColumnGap":1,
	"gridColumnStart":1,
	"gridRowEnd":1,
	"gridRowGap":1,
	"gridRowStart":1,
	"gridTemplateColumns":1,
	"gridTemplateRows":1,
	"gridTemplateAreas":1,
	"shadowColor":1,
	"shadowOffset":1,
	"shadowOpacity":1,
	"shadowRadius":1,
	"shadowSpread":1,
	"perspective":1,
	"perspectiveOrigin":1,
	"transform":1,
	"transformOrigin":1,
	"transformStyle":1,
	"backgroundColor":1,
	"opacity":1,
	"elevation":1,
	"backdropFilter":1,
	"backgroundAttachment":1,
	"backgroundBlendMode":1,
	"backgroundClip":1,
	"backgroundImage":1,
	"backgroundOrigin":1,
	"backgroundPosition":1,
	"backgroundRepeat":1,
	"backgroundSize":1,
	"boxShadow":1,
	"clip":1,
	"filter":1,
	"outlineColor":1,
	"outlineOffset":1,
	"outlineStyle":1,
	"outlineWidth":1,
	"overscrollBehavior":1,
	"overscrollBehaviorX":1,
	"overscrollBehaviorY":1,
	"scrollbarWidth":1,
	"scrollSnapAlign":1,
	"scrollSnapType":1,
	"WebkitMaskImage":1,
	"WebkitOverflowScrolling":1
}


Module.Inputs = {
	paddingLeft: new Types.Integer(),
	paddingRight: new Types.Integer(),
	paddingTop: new Types.Integer(),
	paddingBottom: new Types.Integer(),
	marginLeft: new Types.Integer(),
	marginRight: new Types.Integer(),
	marginTop: new Types.Integer(),
	marginBottom: new Types.Integer()
}