import React from 'react';

import LinkManager from 'modularity-front';
import Modularity from 'modularity-front';
import {Button , TextInput, Textarea} from 'react-materialize';


import ReCAPTCHA from "react-google-recaptcha";


import Dropdown from './UserInputs/DropdownFilter';
import Editor from './UserInputs/Editor';



let Input = TextInput;
let Module = Modularity.Module;

class FormModule extends Modularity.Module {
	constructor(props) {
		super(props);
		this.state = {
		}
		this.FormInputs.onUpdate((e)=> {
			this.setState(this.updateFromInput());
		});
		this.state = {...this.state, ...this.updateFromInput()};
		this.formRef = React.createRef();
	}


	updateFromInput() {
		return Object.keys(this.FormInputs.value).reduce((obj, key,index)=> {
			return {
				...obj,
				[key]: this.FormInputs.value[key].value
			}
		}, {});
	}

	updateField(key, value, filter) {
		let field = {
			[key]: value
		};
		let state = {...this.state, ...field};
		this.setState({ ...field});
		this.formData.set(state);
	}

	isValid() {
		console.log(this.state);
		for(var i in this.FormInputs.value) {
			let item = this.FormInputs.value[i];
			console.log(item,item.filter.required, this.state[i]);
			if (item.filter &&  item.filter.required && !this.state[i])
				return false;
		}
		return true;
	}

	captchaComplete(token) {
		if(!token || token.legth < 10)return;
		this.setState({
			captcha: token.toString()
		});
	}

	submitData(e) {
		e.preventDefault();
		this.onSubmit.set(this.state);
	}

	render() {
		return(
			<div className={" " +this.props.className}>
				<form ref={this.formRef} className={" "} onSubmit={(e) => this.submitData(e)}>
				<div className="row">
					{Object.keys(this.FormInputs.value).map((key,index) => {
						let input = this.FormInputs.value[key];
						if(input){
							if(input.filter && ["manytomany"].includes(input.filter.type)) {
								return <div className={"input-field " + input.columns} key={key}>
											<Dropdown filter={input.filter} defaultValue={(input.value || [])[0]} Filters={(data) => {
												return data ? this.updateField(input.filter.field, data.values, input.filter) : null
											}}/>
										</div>
							} else if(input.filter && ["onetoone"].includes(input.filter.type)) {
								return <div className={"input-field " + input.columns} key={key}>
											<Dropdown filter={input.filter} defaultValue={input.value.name} Filters={(data) => {
												return data ? this.updateField(input.filter.field, data.values[0], input.filter) : null
											}}/>
										</div>
							} else if(input.filter && ["exact", "select"].includes(input.filter.type)) {
								return <div className={"input-field " + input.columns} key={key}>
											<Dropdown filter={input.filter} defaultValue={input.value} Filters={(data) => {
												return data ? this.updateField(input.filter.field, data.values[0], input.filter) : null
											}}/>
										</div>
							} else if(input.filter && ["editor"].includes(input.filter.type)) {
								// Editor here
								return <div className="input-field col s12" key={key}>
											<Editor Name={input.filter.name || key} data={input.value} onChange={(data) => {
												return data ? this.updateField(input.filter.field, data, input.filter) : null
											}}/>
										</div>
							} else if(input.filter && ["textarea"].includes(input.filter.type)) {
								// todo textarea
								return <div className="input-field col s12" key={key}>
											<Textarea Name={input.filter.name || key} data={input.value} 
												onChange={(data) =>  this.updateField(input.filter.field, data.target.value, input.filter)}
												label={input.placeholder} noLayout={true}
										 		email={input.filter.email} password={input.filter.password} validate={input.filter.required}
										 		success={input.filter.success} error={input.filter.error || "Required field"} required={input.filter.required}
										 	/>
										</div>
							} else {
								input.filter = input.filter || {};
								return(
									<div className={input.columns} key={key}>
										<Input noLayout={true}
										 key={key}
										 value={input.value===undefined || Number.isNaN(input.value) ? (input.value || '') : '' + input.value} 
										 onChange={(e) => this.updateField(key, e.target.value, input.filter)} label={input.placeholder}
										 email={input.filter.email} password={input.filter.password} validate={input.filter.required}
										 success={input.filter.success} error={input.filter.error || "Required field"} required={input.filter.required}
										 />
									</div>
								);
							}
						}
					})}
				</div>

				{this.withCaptcha.value && this.CaptchaKey.value && 
					<div>
						<ReCAPTCHA
						    sitekey={this.CaptchaKey.value}
						    onChange={(e) => this.captchaComplete(e)}
						  />,
					</div>
				}

				{this.activeButton.value ? (
				<div className={'row center-children'}>
					<div className={"col s"+this.button.columns}>
						<Button  type="submit" className={this.button.class} waves='light'>{this.button.value || "Submit"}</Button>
					</div>
				</div>
				): (
				''
				)}
				</form>
			{super.render()}
			</div>

			);
				    
	}
}

//[{label:"Email",type:"email",placeholder:"",columns:12,disabled:false},
//		{label:"Password",type:"password",placeholder:"",columns:12,disabled:false}]



FormModule.EditPosition = "top-right";
FormModule.Inputs = {
	FormInputs: {
		type: Module.Types.Object,
		defaultValue: {
			"email":{
				type:"email",
				placeholder:"Email",
				columns:12
			},
			"password":{
				type:"password",
				placeholder:"Password",
				columns:12
			}
		}	
	},
	activeButton:{
		type:Module.Types.Boolean,
		
	},
	button: {
		type: Module.Types.Text,
		defaultValue: "Submit",
		class:"empty",
		columns:12
	},
	withCaptcha: {
		type: Module.Types.Boolean
	},
	CaptchaKey: {
		type: Module.Types.Text
	}	
}

FormModule.Outputs ={
	//
	formData:{},
	onSubmit:{}
}

FormModule.Category = "sxoinas";
export default FormModule;